From 9e5e630987abf0fcae68c7de8497a50894ad3ee9 Mon Sep 17 00:00:00 2001 From: Netfan Date: Sat, 29 May 2021 23:11:38 +0800 Subject: [PATCH] refactor(api): remove unnecessary userId param (#675) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(api): remove unnecessary userId param 移除getUserInfo、getPermCode、getMenuList接口的userId参数。 这些接口应当始终与当前登录用户相关而无需传递userId。 * fix: fix auth header key case error --- mock/_util.ts | 15 +++ mock/sys/menu.ts | 135 +++++++++++++---------- mock/sys/user.ts | 27 +++-- src/api/sys/menu.ts | 8 +- src/api/sys/model/menuModel.ts | 9 +- src/api/sys/model/userModel.ts | 9 +- src/api/sys/user.ts | 27 ++--- src/hooks/web/usePermission.ts | 15 ++- src/store/modules/permission.ts | 20 ++-- src/store/modules/user.ts | 18 ++- src/views/demo/permission/back/Btn.vue | 92 ++++++++------- src/views/demo/permission/back/index.vue | 36 +++++- 12 files changed, 227 insertions(+), 184 deletions(-) diff --git a/mock/_util.ts b/mock/_util.ts index 0c15b154..0eedb758 100644 --- a/mock/_util.ts +++ b/mock/_util.ts @@ -43,3 +43,18 @@ export function pagination(pageNo: number, pageSize: number, array: T[] : array.slice(offset, offset + Number(pageSize)); return ret; } + +export interface requestParams { + method: string; + body: any; + headers?: { authorization?: string }; + query: any; +} + +/** + * @description 本函数用于从request数据中获取token，请根据项目的实际情况修改 + * + */ +export function getRequestToken({ headers }: requestParams): string | undefined { + return headers?.authorization; +} diff --git a/mock/sys/menu.ts b/mock/sys/menu.ts index 043e7cde..c61e2164 100644 --- a/mock/sys/menu.ts +++ b/mock/sys/menu.ts @@ -1,5 +1,6 @@ -import { resultSuccess } from '../_util'; +import { resultSuccess, resultError, getRequestToken, requestParams } from '../_util'; import { MockMethod } from 'vite-plugin-mock'; +import { createFakeUserList } from './user'; // single const dashboardRoute = { @@ -13,47 +14,6 @@ const dashboardRoute = { }, }; -const frontRoute = { - path: 'front', - name: 'PermissionFrontDemo', - meta: { - title: 'routes.demo.permission.front', - }, - children: [ - { - path: 'page', - name: 'FrontPageAuth', - component: '/demo/permission/front/index', - meta: { - title: 'routes.demo.permission.frontPage', - }, - }, - { - path: 'btn', - name: 'FrontBtnAuth', - component: '/demo/permission/front/Btn', - meta: { - title: 'routes.demo.permission.frontBtn', - }, - }, - { - path: 'auth-pageA', - name: 'FrontAuthPageA', - component: '/demo/permission/front/AuthPageA', - meta: { - title: 'routes.demo.permission.frontTestA', - }, - }, - { - path: 'auth-pageB', - name: 'FrontAuthPageB', - component: '/demo/permission/front/AuthPageB', - meta: { - title: 'routes.demo.permission.frontTestB', - }, - }, - ], -}; const backRoute = { path: 'back', name: 'PermissionBackDemo', @@ -80,19 +40,8 @@ const backRoute = { }, ], }; -const authRoute = { - path: '/permission', - name: 'Permission', - component: 'LAYOUT', - redirect: '/permission/front/page', - meta: { - icon: 'carbon:user-role', - title: 'routes.demo.permission.permission', - }, - children: [frontRoute, backRoute], -}; -const authRoute1 = { +const authRoute = { path: '/permission', name: 'Permission', component: 'LAYOUT', @@ -159,18 +108,86 @@ const levelRoute = { }, ], }; + +const sysRoute = { + path: '/system', + name: 'System', + component: 'LAYOUT', + redirect: '/system/account', + meta: { + icon: 'ion:settings-outline', + title: 'routes.demo.system.moduleName', + }, + children: [ + { + path: 'account', + name: 'AccountManagement', + meta: { + title: 'routes.demo.system.account', + ignoreKeepAlive: true, + }, + component: '/demo/system/account/index', + }, + { + path: 'role', + name: 'RoleManagement', + meta: { + title: 'routes.demo.system.role', + ignoreKeepAlive: true, + }, + component: '/demo/system/role/index', + }, + + { + path: 'menu', + name: 'MenuManagement', + meta: { + title: 'routes.demo.system.menu', + ignoreKeepAlive: true, + }, + component: '/demo/system/menu/index', + }, + { + path: 'dept', + name: 'DeptManagement', + meta: { + title: 'routes.demo.system.dept', + ignoreKeepAlive: true, + }, + component: '/demo/system/dept/index', + }, + { + path: 'changePassword', + name: 'ChangePassword', + meta: { + title: 'routes.demo.system.password', + ignoreKeepAlive: true, + }, + component: '/demo/system/password/index', + }, + ], +}; + export default [ { - url: '/basic-api/getMenuListById', + url: '/basic-api/getMenuList', timeout: 1000, method: 'get', - response: ({ query }) => { - const { id } = query; + response: (request: requestParams) => { + const token = getRequestToken(request); + if (!token) { + return resultError('Invalid token!'); + } + const checkUser = createFakeUserList().find((item) => item.token === token); + if (!checkUser) { + return resultError('Invalid user token!'); + } + const id = checkUser.userId; if (!id || id === '1') { - return resultSuccess([dashboardRoute, authRoute, levelRoute]); + return resultSuccess([dashboardRoute, authRoute, levelRoute, sysRoute]); } if (id === '2') { - return resultSuccess([dashboardRoute, authRoute1, levelRoute]); + return resultSuccess([dashboardRoute, authRoute, levelRoute]); } }, }, diff --git a/mock/sys/user.ts b/mock/sys/user.ts index 2658b7f7..3b2d78dd 100644 --- a/mock/sys/user.ts +++ b/mock/sys/user.ts @@ -1,7 +1,7 @@ import { MockMethod } from 'vite-plugin-mock'; -import { resultError, resultSuccess } from '../_util'; +import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util'; -function createFakeUserList() { +export function createFakeUserList() { return [ { userId: '1', @@ -67,11 +67,12 @@ export default [ }, }, { - url: '/basic-api/getUserInfoById', + url: '/basic-api/getUserInfo', method: 'get', - response: ({ query }) => { - const { userId } = query; - const checkUser = createFakeUserList().find((item) => item.userId === userId); + response: (request: requestParams) => { + const token = getRequestToken(request); + if (!token) return resultError('Invalid token'); + const checkUser = createFakeUserList().find((item) => item.token === token); if (!checkUser) { return resultError('The corresponding user information was not obtained!'); } @@ -79,15 +80,17 @@ export default [ }, }, { - url: '/basic-api/getPermCodeByUserId', + url: '/basic-api/getPermCode', timeout: 200, method: 'get', - response: ({ query }) => { - const { userId } = query; - if (!userId) { - return resultError('userId is not null!'); + response: (request: requestParams) => { + const token = getRequestToken(request); + if (!token) return resultError('Invalid token'); + const checkUser = createFakeUserList().find((item) => item.token === token); + if (!checkUser) { + return resultError('Invalid token!'); } - const codeList = fakeCodeList[userId]; + const codeList = fakeCodeList[checkUser.userId]; return resultSuccess(codeList); }, diff --git a/src/api/sys/menu.ts b/src/api/sys/menu.ts index bf757455..de9fa563 100644 --- a/src/api/sys/menu.ts +++ b/src/api/sys/menu.ts @@ -1,14 +1,14 @@ import { defHttp } from '/@/utils/http/axios'; -import { getMenuListByIdParams, getMenuListByIdParamsResultModel } from './model/menuModel'; +import { getMenuListResultModel } from './model/menuModel'; enum Api { - GetMenuListById = '/getMenuListById', + GetMenuList = '/getMenuList', } /** * @description: Get user menu based on id */ -export const getMenuListById = (params: getMenuListByIdParams) => { - return defHttp.get({ url: Api.GetMenuListById, params }); +export const getMenuList = () => { + return defHttp.get({ url: Api.GetMenuList }); }; diff --git a/src/api/sys/model/menuModel.ts b/src/api/sys/model/menuModel.ts index eac52353..139c4f79 100644 --- a/src/api/sys/model/menuModel.ts +++ b/src/api/sys/model/menuModel.ts @@ -10,14 +10,7 @@ export interface RouteItem { children?: RouteItem[]; } -/** - * @description: Get menu interface - */ -export interface getMenuListByIdParams { - id: number | string; -} - /** * @description: Get menu return value */ -export type getMenuListByIdParamsResultModel = RouteItem[]; +export type getMenuListResultModel = RouteItem[]; diff --git a/src/api/sys/model/userModel.ts b/src/api/sys/model/userModel.ts index a7a74442..2415c911 100644 --- a/src/api/sys/model/userModel.ts +++ b/src/api/sys/model/userModel.ts @@ -6,13 +6,6 @@ export interface LoginParams { password: string; } -/** - * @description: Get user information - */ -export interface GetUserInfoByUserIdParams { - userId: string | number; -} - export interface RoleInfo { roleName: string; value: string; @@ -30,7 +23,7 @@ export interface LoginResultModel { /** * @description: Get user information return value */ -export interface GetUserInfoByUserIdModel { +export interface GetUserInfoModel { roles: RoleInfo[]; // 用户id userId: string | number; diff --git a/src/api/sys/user.ts b/src/api/sys/user.ts index d35d7e6d..d60f2d8b 100644 --- a/src/api/sys/user.ts +++ b/src/api/sys/user.ts @@ -1,17 +1,12 @@ import { defHttp } from '/@/utils/http/axios'; -import { - LoginParams, - LoginResultModel, - GetUserInfoByUserIdParams, - GetUserInfoByUserIdModel, -} from './model/userModel'; +import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel'; import { ErrorMessageMode } from '/@/utils/http/axios/types'; enum Api { Login = '/login', - GetUserInfoById = '/getUserInfoById', - GetPermCodeByUserId = '/getPermCodeByUserId', + GetUserInfo = '/getUserInfo', + GetPermCode = '/getPermCode', } /** @@ -30,18 +25,12 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') } /** - * @description: getUserInfoById + * @description: getUserInfo */ -export function getUserInfoById(params: GetUserInfoByUserIdParams) { - return defHttp.get({ - url: Api.GetUserInfoById, - params, - }); +export function getUserInfo() { + return defHttp.get({ url: Api.GetUserInfo }); } -export function getPermCodeByUserId(params: GetUserInfoByUserIdParams) { - return defHttp.get({ - url: Api.GetPermCodeByUserId, - params, - }); +export function getPermCode() { + return defHttp.get({ url: Api.GetPermCode }); } diff --git a/src/hooks/web/usePermission.ts b/src/hooks/web/usePermission.ts index 002ae9a0..1fce03a8 100644 --- a/src/hooks/web/usePermission.ts +++ b/src/hooks/web/usePermission.ts @@ -41,13 +41,13 @@ export function usePermission() { * Reset and regain authority resource information * @param id */ - async function resume(id?: string | number) { + async function resume() { const tabStore = useMultipleTabStore(); tabStore.clearCacheTabs(); resetRouter(); - const routes = await permissionStore.buildRoutesAction(id); + const routes = await permissionStore.buildRoutesAction(); routes.forEach((route) => { - router.addRoute((route as unknown) as RouteRecordRaw); + router.addRoute(route as unknown as RouteRecordRaw); }); permissionStore.setLastBuildMenuTime(); closeAll(); @@ -103,12 +103,11 @@ export function usePermission() { } /** - * Change menu + * refresh menu data */ - async function changeMenu(id?: string | number) { - // TODO The id passed in here is for testing. Actually, you don’t need to pass it. The id of the login person will be automatically obtained. - resume(id); + async function refreshMenu() { + resume(); } - return { changeRole, hasPermission, togglePermissionMode, changeMenu }; + return { changeRole, hasPermission, togglePermissionMode, refreshMenu }; } diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index bdabc7e4..873b9b2e 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -18,8 +18,8 @@ import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic'; import { filter } from '/@/utils/helper/treeHelper'; -import { getMenuListById } from '/@/api/sys/menu'; -import { getPermCodeByUserId } from '/@/api/sys/user'; +import { getMenuList } from '/@/api/sys/menu'; +import { getPermCode } from '/@/api/sys/user'; import { useMessage } from '/@/hooks/web/useMessage'; @@ -80,11 +80,11 @@ export const usePermissionStore = defineStore({ this.backMenuList = []; this.lastBuildMenuTime = 0; }, - async changePermissionCode(userId: string) { - const codeList = await getPermCodeByUserId({ userId }); + async changePermissionCode() { + const codeList = await getPermCode(); this.setPermCodeList(codeList); }, - async buildRoutesAction(id?: number | string): Promise { + async buildRoutesAction(): Promise { const { t } = useI18n(); const userStore = useUserStore(); const appStore = useAppStoreWidthOut(); @@ -112,23 +112,17 @@ export const usePermissionStore = defineStore({ content: t('sys.app.menuLoading'), duration: 1, }); - // Here to get the background routing menu logic to modify by yourself - const paramId = id || userStore.getUserInfo?.userId; // !Simulate to obtain permission codes from the background, // this function may only need to be executed once, and the actual project can be put at the right time by itself let routeList: AppRouteRecordRaw[] = []; try { - this.changePermissionCode('1'); - routeList = (await getMenuListById({ id: paramId })) as AppRouteRecordRaw[]; + this.changePermissionCode(); + routeList = (await getMenuList()) as AppRouteRecordRaw[]; } catch (error) { console.error(error); } - if (!paramId) { - throw new Error('paramId is undefined!'); - } - // Dynamically introduce components routeList = transformObjToRoute(routeList); diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index d5ad7fec..3a07e3ad 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -9,13 +9,9 @@ import { PageEnum } from '/@/enums/pageEnum'; import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum'; import { getAuthCache, setAuthCache } from '/@/utils/auth'; -import { - GetUserInfoByUserIdModel, - GetUserInfoByUserIdParams, - LoginParams, -} from '/@/api/sys/model/userModel'; +import { GetUserInfoModel, LoginParams } from '/@/api/sys/model/userModel'; -import { getUserInfoById, loginApi } from '/@/api/sys/user'; +import { getUserInfo, loginApi } from '/@/api/sys/user'; import { useI18n } from '/@/hooks/web/useI18n'; import { useMessage } from '/@/hooks/web/useMessage'; @@ -84,16 +80,16 @@ export const useUserStore = defineStore({ goHome?: boolean; mode?: ErrorMessageMode; } - ): Promise { + ): Promise { try { const { goHome = true, mode, ...loginParams } = params; const data = await loginApi(loginParams, mode); - const { token, userId } = data; + const { token } = data; // save token this.setToken(token); // get user info - const userInfo = await this.getUserInfoAction({ userId }); + const userInfo = await this.getUserInfoAction(); const sessionTimeout = this.sessionTimeout; sessionTimeout && this.setSessionTimeout(false); @@ -103,8 +99,8 @@ export const useUserStore = defineStore({ return Promise.reject(error); } }, - async getUserInfoAction({ userId }: GetUserInfoByUserIdParams) { - const userInfo = await getUserInfoById({ userId }); + async getUserInfoAction() { + const userInfo = await getUserInfo(); const { roles } = userInfo; const roleList = roles.map((item) => item.value) as RoleEnum[]; this.setUserInfo(userInfo); diff --git a/src/views/demo/permission/back/Btn.vue b/src/views/demo/permission/back/Btn.vue index db8bb031..abfadae8 100644 --- a/src/views/demo/permission/back/Btn.vue +++ b/src/views/demo/permission/back/Btn.vue @@ -1,60 +1,64 @@