refactor(api): remove unnecessary userId param (#675)

* refactor(api): remove unnecessary userId param

移除getUserInfo、getPermCode、getMenuList接口的userId参数。
这些接口应当始终与当前登录用户相关而无需传递userId。

* fix: fix auth header key case error

mock/_util.ts

@@ -43,3 +43,18 @@ export function pagination<T = any>(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;
+}

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]);
       }
     },
   },

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);
     },

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<getMenuListByIdParamsResultModel>({ url: Api.GetMenuListById, params });
+export const getMenuList = () => {
+  return defHttp.get<getMenuListResultModel>({ url: Api.GetMenuList });
 };

src/api/sys/model/menuModel.ts

@@ -11,13 +11,6 @@ export interface RouteItem {
 }
 
 /**
- * @description: Get menu interface
- */
-export interface getMenuListByIdParams {
-  id: number | string;
-}
-
-/**
  * @description: Get menu return value
  */
-export type getMenuListByIdParamsResultModel = RouteItem[];
+export type getMenuListResultModel = RouteItem[];

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;

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<GetUserInfoByUserIdModel>({
-    url: Api.GetUserInfoById,
-    params,
-  });
+export function getUserInfo() {
+  return defHttp.get<GetUserInfoModel>({ url: Api.GetUserInfo });
 }
 
-export function getPermCodeByUserId(params: GetUserInfoByUserIdParams) {
-  return defHttp.get<string[]>({
-    url: Api.GetPermCodeByUserId,
-    params,
-  });
+export function getPermCode() {
+  return defHttp.get<string[]>({ url: Api.GetPermCode });
 }

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 };
 }

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<AppRouteRecordRaw[]> {
+    async buildRoutesAction(): Promise<AppRouteRecordRaw[]> {
       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);
 

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<GetUserInfoByUserIdModel | null> {
+    ): Promise<GetUserInfoModel | null> {
       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);

src/views/demo/permission/back/Btn.vue

@@ -1,60 +1,64 @@
 <template>
   <PageWrapper contentBackground title="按钮权限控制" contentClass="p-4">
-    <Alert message="刷新后会还原" show-icon />
-
     <CurrentPermissionMode />
-
     <p>
       当前拥有的code列表: <a> {{ permissionStore.getPermCodeList }} </a>
     </p>
     <Divider />
-    <Alert class="mt-4" type="info" message="点击后请查看按钮变化" show-icon />
+    <Alert
+      class="mt-4"
+      type="info"
+      message="点击后请查看按钮变化(必须处于后台权限模式才可测试此页面所展示的功能)"
+      show-icon
+    />
     <Divider />
-    <a-button type="primary" class="mr-2" @click="changePermissionCode('2')">
+    <a-button type="primary" class="mr-2" @click="switchToken(2)" :disabled="!isBackPremissionMode">
       点击切换按钮权限(用户id为2)
     </a-button>
-    <a-button type="primary" @click="changePermissionCode('1')">
+    <a-button type="primary" @click="switchToken(1)" :disabled="!isBackPremissionMode">
       点击切换按钮权限(用户id为1,默认)
     </a-button>
 
-    <Divider>组件方式判断权限</Divider>
-    <Authority :value="'1000'">
-      <a-button type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
-    </Authority>
+    <template v-if="isBackPremissionMode">
+      <Divider>组件方式判断权限</Divider>
+      <Authority :value="'1000'">
+        <a-button type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
+      </Authority>
 
-    <Authority :value="'2000'">
-      <a-button color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
-    </Authority>
+      <Authority :value="'2000'">
+        <a-button color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
+      </Authority>
 
-    <Authority :value="['1000', '2000']">
-      <a-button color="error" class="mx-4"> 拥有code ['1000','2000']角色权限可见 </a-button>
-    </Authority>
+      <Authority :value="['1000', '2000']">
+        <a-button color="error" class="mx-4"> 拥有code ['1000','2000']角色权限可见 </a-button>
+      </Authority>
 
-    <Divider>函数方式方式判断权限</Divider>
-    <a-button v-if="hasPermission('1000')" type="primary" class="mx-4">
-      拥有code ['1000']权限可见
-    </a-button>
+      <Divider>函数方式方式判断权限</Divider>
+      <a-button v-if="hasPermission('1000')" type="primary" class="mx-4">
+        拥有code ['1000']权限可见
+      </a-button>
 
-    <a-button v-if="hasPermission('2000')" color="success" class="mx-4">
-      拥有code ['2000']权限可见
-    </a-button>
+      <a-button v-if="hasPermission('2000')" color="success" class="mx-4">
+        拥有code ['2000']权限可见
+      </a-button>
 
-    <a-button v-if="hasPermission(['1000', '2000'])" color="error" class="mx-4">
-      拥有code ['1000','2000']角色权限可见
-    </a-button>
+      <a-button v-if="hasPermission(['1000', '2000'])" color="error" class="mx-4">
+        拥有code ['1000','2000']角色权限可见
+      </a-button>
 
-    <Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider>
-    <a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
+      <Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider>
+      <a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
 
-    <a-button v-auth="'2000'" color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
+      <a-button v-auth="'2000'" color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
 
-    <a-button v-auth="['1000', '2000']" color="error" class="mx-4">
-      拥有code ['1000','2000']角色权限可见
-    </a-button>
+      <a-button v-auth="['1000', '2000']" color="error" class="mx-4">
+        拥有code ['1000','2000']角色权限可见
+      </a-button>
+    </template>
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, computed } from 'vue';
   import { Alert, Divider } from 'ant-design-vue';
   import CurrentPermissionMode from '../CurrentPermissionMode.vue';
   import { usePermission } from '/@/hooks/web/usePermission';
@@ -62,22 +66,36 @@
   import { usePermissionStore } from '/@/store/modules/permission';
   import { PermissionModeEnum } from '/@/enums/appEnum';
   import { PageWrapper } from '/@/components/Page';
+  import { useAppStore } from '/@/store/modules/app';
+  import { useUserStore } from '/@/store/modules/user';
 
   export default defineComponent({
     components: { Alert, PageWrapper, CurrentPermissionMode, Divider, Authority },
     setup() {
       const { hasPermission } = usePermission();
       const permissionStore = usePermissionStore();
+      const appStore = useAppStore();
+      const userStore = useUserStore();
+
+      const isBackPremissionMode = computed(
+        () => appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK
+      );
+
+      async function switchToken(userId: number) {
+        // 本函数切换用户登录Token的部分仅用于演示，实际生产时切换身份应当重新登录
+        const token = 'fakeToken' + userId;
+        userStore.setToken(token);
 
-      function changePermissionCode(userId: string) {
-        permissionStore.changePermissionCode(userId);
+        // 重新获取用户信息和菜单
+        userStore.getUserInfoAction();
+        permissionStore.changePermissionCode();
       }
 
       return {
         hasPermission,
         permissionStore,
-        changePermissionCode,
-        PermissionModeEnum,
+        switchToken,
+        isBackPremissionMode,
       };
     },
   });

src/views/demo/permission/back/index.vue

@@ -12,26 +12,52 @@
     <div class="mt-4">
       权限切换(请先切换权限模式为后台权限模式):
       <a-button-group>
-        <a-button @click="changeMenu('1')"> 获取用户id为1的菜单 </a-button>
-        <a-button @click="changeMenu('2')"> 获取用户id为2的菜单 </a-button>
+        <a-button @click="switchToken(1)" :disabled="!isBackPremissionMode">
+          获取用户id为1的菜单
+        </a-button>
+        <a-button @click="switchToken(2)" :disabled="!isBackPremissionMode">
+          获取用户id为2的菜单
+        </a-button>
       </a-button-group>
     </div>
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, computed } from 'vue';
   import CurrentPermissionMode from '../CurrentPermissionMode.vue';
   import { RoleEnum } from '/@/enums/roleEnum';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import { useUserStore } from '/@/store/modules/user';
   import { PageWrapper } from '/@/components/Page';
+  import { PermissionModeEnum } from '/@/enums/appEnum';
+  import { useAppStore } from '/@/store/modules/app';
   import { Alert } from 'ant-design-vue';
   export default defineComponent({
     components: { Alert, CurrentPermissionMode, PageWrapper },
     setup() {
-      const { changeMenu } = usePermission();
+      const { refreshMenu } = usePermission();
+      const userStore = useUserStore();
+      const appStore = useAppStore();
+
+      const isBackPremissionMode = computed(
+        () => appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK
+      );
+
+      async function switchToken(userId: number) {
+        // 本函数切换用户登录Token的部分仅用于演示，实际生产时切换身份应当重新登录
+        const token = 'fakeToken' + userId;
+        userStore.setToken(token);
+
+        // 重新获取用户信息和菜单
+        userStore.getUserInfoAction();
+        refreshMenu();
+      }
+
       return {
         RoleEnum,
-        changeMenu,
+        refreshMenu,
+        switchToken,
+        isBackPremissionMode,
       };
     },
   });