canrd-outside / order-erp-front · Commits

Commit 9e5e630987abf0fcae68c7de8497a50894ad3ee9

Authored by Netfan
Committed by GitHub
1 parent 70dcd60b

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
Inline Side-by-side
Showing 12 changed files with 227 additions and 184 deletions
mock/_util.ts
  View file @9e5e630
... ... @@ -43,3 +43,18 @@ export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]
43 43 : array.slice(offset, offset + Number(pageSize));
44 44 return ret;
45 45 }
  46 +
  47 +export interface requestParams {
  48 + method: string;
  49 + body: any;
  50 + headers?: { authorization?: string };
  51 + query: any;
  52 +}
  53 +
  54 +/**
  55 + * @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
  56 + *
  57 + */
  58 +export function getRequestToken({ headers }: requestParams): string | undefined {
  59 + return headers?.authorization;
  60 +}
... ...
mock/sys/menu.ts
  View file @9e5e630
1   -import { resultSuccess } from '../_util';
  1 +import { resultSuccess, resultError, getRequestToken, requestParams } from '../_util';
2 2 import { MockMethod } from 'vite-plugin-mock';
  3 +import { createFakeUserList } from './user';
3 4  
4 5 // single
5 6 const dashboardRoute = {
... ... @@ -13,47 +14,6 @@ const dashboardRoute = {
13 14 },
14 15 };
15 16  
16   -const frontRoute = {
17   - path: 'front',
18   - name: 'PermissionFrontDemo',
19   - meta: {
20   - title: 'routes.demo.permission.front',
21   - },
22   - children: [
23   - {
24   - path: 'page',
25   - name: 'FrontPageAuth',
26   - component: '/demo/permission/front/index',
27   - meta: {
28   - title: 'routes.demo.permission.frontPage',
29   - },
30   - },
31   - {
32   - path: 'btn',
33   - name: 'FrontBtnAuth',
34   - component: '/demo/permission/front/Btn',
35   - meta: {
36   - title: 'routes.demo.permission.frontBtn',
37   - },
38   - },
39   - {
40   - path: 'auth-pageA',
41   - name: 'FrontAuthPageA',
42   - component: '/demo/permission/front/AuthPageA',
43   - meta: {
44   - title: 'routes.demo.permission.frontTestA',
45   - },
46   - },
47   - {
48   - path: 'auth-pageB',
49   - name: 'FrontAuthPageB',
50   - component: '/demo/permission/front/AuthPageB',
51   - meta: {
52   - title: 'routes.demo.permission.frontTestB',
53   - },
54   - },
55   - ],
56   -};
57 17 const backRoute = {
58 18 path: 'back',
59 19 name: 'PermissionBackDemo',
... ... @@ -80,19 +40,8 @@ const backRoute = {
80 40 },
81 41 ],
82 42 };
83   -const authRoute = {
84   - path: '/permission',
85   - name: 'Permission',
86   - component: 'LAYOUT',
87   - redirect: '/permission/front/page',
88   - meta: {
89   - icon: 'carbon:user-role',
90   - title: 'routes.demo.permission.permission',
91   - },
92   - children: [frontRoute, backRoute],
93   -};
94 43  
95   -const authRoute1 = {
  44 +const authRoute = {
96 45 path: '/permission',
97 46 name: 'Permission',
98 47 component: 'LAYOUT',
... ... @@ -159,18 +108,86 @@ const levelRoute = {
159 108 },
160 109 ],
161 110 };
  111 +
  112 +const sysRoute = {
  113 + path: '/system',
  114 + name: 'System',
  115 + component: 'LAYOUT',
  116 + redirect: '/system/account',
  117 + meta: {
  118 + icon: 'ion:settings-outline',
  119 + title: 'routes.demo.system.moduleName',
  120 + },
  121 + children: [
  122 + {
  123 + path: 'account',
  124 + name: 'AccountManagement',
  125 + meta: {
  126 + title: 'routes.demo.system.account',
  127 + ignoreKeepAlive: true,
  128 + },
  129 + component: '/demo/system/account/index',
  130 + },
  131 + {
  132 + path: 'role',
  133 + name: 'RoleManagement',
  134 + meta: {
  135 + title: 'routes.demo.system.role',
  136 + ignoreKeepAlive: true,
  137 + },
  138 + component: '/demo/system/role/index',
  139 + },
  140 +
  141 + {
  142 + path: 'menu',
  143 + name: 'MenuManagement',
  144 + meta: {
  145 + title: 'routes.demo.system.menu',
  146 + ignoreKeepAlive: true,
  147 + },
  148 + component: '/demo/system/menu/index',
  149 + },
  150 + {
  151 + path: 'dept',
  152 + name: 'DeptManagement',
  153 + meta: {
  154 + title: 'routes.demo.system.dept',
  155 + ignoreKeepAlive: true,
  156 + },
  157 + component: '/demo/system/dept/index',
  158 + },
  159 + {
  160 + path: 'changePassword',
  161 + name: 'ChangePassword',
  162 + meta: {
  163 + title: 'routes.demo.system.password',
  164 + ignoreKeepAlive: true,
  165 + },
  166 + component: '/demo/system/password/index',
  167 + },
  168 + ],
  169 +};
  170 +
162 171 export default [
163 172 {
164   - url: '/basic-api/getMenuListById',
  173 + url: '/basic-api/getMenuList',
165 174 timeout: 1000,
166 175 method: 'get',
167   - response: ({ query }) => {
168   - const { id } = query;
  176 + response: (request: requestParams) => {
  177 + const token = getRequestToken(request);
  178 + if (!token) {
  179 + return resultError('Invalid token!');
  180 + }
  181 + const checkUser = createFakeUserList().find((item) => item.token === token);
  182 + if (!checkUser) {
  183 + return resultError('Invalid user token!');
  184 + }
  185 + const id = checkUser.userId;
169 186 if (!id || id === '1') {
170   - return resultSuccess([dashboardRoute, authRoute, levelRoute]);
  187 + return resultSuccess([dashboardRoute, authRoute, levelRoute, sysRoute]);
171 188 }
172 189 if (id === '2') {
173   - return resultSuccess([dashboardRoute, authRoute1, levelRoute]);
  190 + return resultSuccess([dashboardRoute, authRoute, levelRoute]);
174 191 }
175 192 },
176 193 },
... ...
mock/sys/user.ts
  View file @9e5e630
1 1 import { MockMethod } from 'vite-plugin-mock';
2   -import { resultError, resultSuccess } from '../_util';
  2 +import { resultError, resultSuccess, getRequestToken, requestParams } from '../_util';
3 3  
4   -function createFakeUserList() {
  4 +export function createFakeUserList() {
5 5 return [
6 6 {
7 7 userId: '1',
... ... @@ -67,11 +67,12 @@ export default [
67 67 },
68 68 },
69 69 {
70   - url: '/basic-api/getUserInfoById',
  70 + url: '/basic-api/getUserInfo',
71 71 method: 'get',
72   - response: ({ query }) => {
73   - const { userId } = query;
74   - const checkUser = createFakeUserList().find((item) => item.userId === userId);
  72 + response: (request: requestParams) => {
  73 + const token = getRequestToken(request);
  74 + if (!token) return resultError('Invalid token');
  75 + const checkUser = createFakeUserList().find((item) => item.token === token);
75 76 if (!checkUser) {
76 77 return resultError('The corresponding user information was not obtained!');
77 78 }
... ... @@ -79,15 +80,17 @@ export default [
79 80 },
80 81 },
81 82 {
82   - url: '/basic-api/getPermCodeByUserId',
  83 + url: '/basic-api/getPermCode',
83 84 timeout: 200,
84 85 method: 'get',
85   - response: ({ query }) => {
86   - const { userId } = query;
87   - if (!userId) {
88   - return resultError('userId is not null!');
  86 + response: (request: requestParams) => {
  87 + const token = getRequestToken(request);
  88 + if (!token) return resultError('Invalid token');
  89 + const checkUser = createFakeUserList().find((item) => item.token === token);
  90 + if (!checkUser) {
  91 + return resultError('Invalid token!');
89 92 }
90   - const codeList = fakeCodeList[userId];
  93 + const codeList = fakeCodeList[checkUser.userId];
91 94  
92 95 return resultSuccess(codeList);
93 96 },
... ...
src/api/sys/menu.ts
  View file @9e5e630
1 1 import { defHttp } from '/@/utils/http/axios';
2   -import { getMenuListByIdParams, getMenuListByIdParamsResultModel } from './model/menuModel';
  2 +import { getMenuListResultModel } from './model/menuModel';
3 3  
4 4 enum Api {
5   - GetMenuListById = '/getMenuListById',
  5 + GetMenuList = '/getMenuList',
6 6 }
7 7  
8 8 /**
9 9 * @description: Get user menu based on id
10 10 */
11 11  
12   -export const getMenuListById = (params: getMenuListByIdParams) => {
13   - return defHttp.get<getMenuListByIdParamsResultModel>({ url: Api.GetMenuListById, params });
  12 +export const getMenuList = () => {
  13 + return defHttp.get<getMenuListResultModel>({ url: Api.GetMenuList });
14 14 };
... ...
src/api/sys/model/menuModel.ts
  View file @9e5e630
... ... @@ -11,13 +11,6 @@ export interface RouteItem {
11 11 }
12 12  
13 13 /**
14   - * @description: Get menu interface
15   - */
16   -export interface getMenuListByIdParams {
17   - id: number | string;
18   -}
19   -
20   -/**
21 14 * @description: Get menu return value
22 15 */
23   -export type getMenuListByIdParamsResultModel = RouteItem[];
  16 +export type getMenuListResultModel = RouteItem[];
... ...
src/api/sys/model/userModel.ts
  View file @9e5e630
... ... @@ -6,13 +6,6 @@ export interface LoginParams {
6 6 password: string;
7 7 }
8 8  
9   -/**
10   - * @description: Get user information
11   - */
12   -export interface GetUserInfoByUserIdParams {
13   - userId: string | number;
14   -}
15   -
16 9 export interface RoleInfo {
17 10 roleName: string;
18 11 value: string;
... ... @@ -30,7 +23,7 @@ export interface LoginResultModel {
30 23 /**
31 24 * @description: Get user information return value
32 25 */
33   -export interface GetUserInfoByUserIdModel {
  26 +export interface GetUserInfoModel {
34 27 roles: RoleInfo[];
35 28 // 用户id
36 29 userId: string | number;
... ...
src/api/sys/user.ts
  View file @9e5e630
1 1 import { defHttp } from '/@/utils/http/axios';
2   -import {
3   - LoginParams,
4   - LoginResultModel,
5   - GetUserInfoByUserIdParams,
6   - GetUserInfoByUserIdModel,
7   -} from './model/userModel';
  2 +import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel';
8 3  
9 4 import { ErrorMessageMode } from '/@/utils/http/axios/types';
10 5  
11 6 enum Api {
12 7 Login = '/login',
13   - GetUserInfoById = '/getUserInfoById',
14   - GetPermCodeByUserId = '/getPermCodeByUserId',
  8 + GetUserInfo = '/getUserInfo',
  9 + GetPermCode = '/getPermCode',
15 10 }
16 11  
17 12 /**
... ... @@ -30,18 +25,12 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = &#39;modal&#39;)
30 25 }
31 26  
32 27 /**
33   - * @description: getUserInfoById
  28 + * @description: getUserInfo
34 29 */
35   -export function getUserInfoById(params: GetUserInfoByUserIdParams) {
36   - return defHttp.get<GetUserInfoByUserIdModel>({
37   - url: Api.GetUserInfoById,
38   - params,
39   - });
  30 +export function getUserInfo() {
  31 + return defHttp.get<GetUserInfoModel>({ url: Api.GetUserInfo });
40 32 }
41 33  
42   -export function getPermCodeByUserId(params: GetUserInfoByUserIdParams) {
43   - return defHttp.get<string[]>({
44   - url: Api.GetPermCodeByUserId,
45   - params,
46   - });
  34 +export function getPermCode() {
  35 + return defHttp.get<string[]>({ url: Api.GetPermCode });
47 36 }
... ...
src/hooks/web/usePermission.ts
  View file @9e5e630
... ... @@ -41,13 +41,13 @@ export function usePermission() {
41 41 * Reset and regain authority resource information
42 42 * @param id
43 43 */
44   - async function resume(id?: string | number) {
  44 + async function resume() {
45 45 const tabStore = useMultipleTabStore();
46 46 tabStore.clearCacheTabs();
47 47 resetRouter();
48   - const routes = await permissionStore.buildRoutesAction(id);
  48 + const routes = await permissionStore.buildRoutesAction();
49 49 routes.forEach((route) => {
50   - router.addRoute((route as unknown) as RouteRecordRaw);
  50 + router.addRoute(route as unknown as RouteRecordRaw);
51 51 });
52 52 permissionStore.setLastBuildMenuTime();
53 53 closeAll();
... ... @@ -103,12 +103,11 @@ export function usePermission() {
103 103 }
104 104  
105 105 /**
106   - * Change menu
  106 + * refresh menu data
107 107 */
108   - async function changeMenu(id?: string | number) {
109   - // 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.
110   - resume(id);
  108 + async function refreshMenu() {
  109 + resume();
111 110 }
112 111  
113   - return { changeRole, hasPermission, togglePermissionMode, changeMenu };
  112 + return { changeRole, hasPermission, togglePermissionMode, refreshMenu };
114 113 }
... ...
src/store/modules/permission.ts
  View file @9e5e630
... ... @@ -18,8 +18,8 @@ import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from &#39;/@/router/routes/basic&#39;;
18 18  
19 19 import { filter } from '/@/utils/helper/treeHelper';
20 20  
21   -import { getMenuListById } from '/@/api/sys/menu';
22   -import { getPermCodeByUserId } from '/@/api/sys/user';
  21 +import { getMenuList } from '/@/api/sys/menu';
  22 +import { getPermCode } from '/@/api/sys/user';
23 23  
24 24 import { useMessage } from '/@/hooks/web/useMessage';
25 25  
... ... @@ -80,11 +80,11 @@ export const usePermissionStore = defineStore({
80 80 this.backMenuList = [];
81 81 this.lastBuildMenuTime = 0;
82 82 },
83   - async changePermissionCode(userId: string) {
84   - const codeList = await getPermCodeByUserId({ userId });
  83 + async changePermissionCode() {
  84 + const codeList = await getPermCode();
85 85 this.setPermCodeList(codeList);
86 86 },
87   - async buildRoutesAction(id?: number | string): Promise<AppRouteRecordRaw[]> {
  87 + async buildRoutesAction(): Promise<AppRouteRecordRaw[]> {
88 88 const { t } = useI18n();
89 89 const userStore = useUserStore();
90 90 const appStore = useAppStoreWidthOut();
... ... @@ -112,23 +112,17 @@ export const usePermissionStore = defineStore({
112 112 content: t('sys.app.menuLoading'),
113 113 duration: 1,
114 114 });
115   - // Here to get the background routing menu logic to modify by yourself
116   - const paramId = id || userStore.getUserInfo?.userId;
117 115  
118 116 // !Simulate to obtain permission codes from the background,
119 117 // this function may only need to be executed once, and the actual project can be put at the right time by itself
120 118 let routeList: AppRouteRecordRaw[] = [];
121 119 try {
122   - this.changePermissionCode('1');
123   - routeList = (await getMenuListById({ id: paramId })) as AppRouteRecordRaw[];
  120 + this.changePermissionCode();
  121 + routeList = (await getMenuList()) as AppRouteRecordRaw[];
124 122 } catch (error) {
125 123 console.error(error);
126 124 }
127 125  
128   - if (!paramId) {
129   - throw new Error('paramId is undefined!');
130   - }
131   -
132 126 // Dynamically introduce components
133 127 routeList = transformObjToRoute(routeList);
134 128  
... ...
src/store/modules/user.ts
  View file @9e5e630
... ... @@ -9,13 +9,9 @@ import { PageEnum } from &#39;/@/enums/pageEnum&#39;;
9 9 import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
10 10  
11 11 import { getAuthCache, setAuthCache } from '/@/utils/auth';
12   -import {
13   - GetUserInfoByUserIdModel,
14   - GetUserInfoByUserIdParams,
15   - LoginParams,
16   -} from '/@/api/sys/model/userModel';
  12 +import { GetUserInfoModel, LoginParams } from '/@/api/sys/model/userModel';
17 13  
18   -import { getUserInfoById, loginApi } from '/@/api/sys/user';
  14 +import { getUserInfo, loginApi } from '/@/api/sys/user';
19 15  
20 16 import { useI18n } from '/@/hooks/web/useI18n';
21 17 import { useMessage } from '/@/hooks/web/useMessage';
... ... @@ -84,16 +80,16 @@ export const useUserStore = defineStore({
84 80 goHome?: boolean;
85 81 mode?: ErrorMessageMode;
86 82 }
87   - ): Promise<GetUserInfoByUserIdModel | null> {
  83 + ): Promise<GetUserInfoModel | null> {
88 84 try {
89 85 const { goHome = true, mode, ...loginParams } = params;
90 86 const data = await loginApi(loginParams, mode);
91   - const { token, userId } = data;
  87 + const { token } = data;
92 88  
93 89 // save token
94 90 this.setToken(token);
95 91 // get user info
96   - const userInfo = await this.getUserInfoAction({ userId });
  92 + const userInfo = await this.getUserInfoAction();
97 93  
98 94 const sessionTimeout = this.sessionTimeout;
99 95 sessionTimeout && this.setSessionTimeout(false);
... ... @@ -103,8 +99,8 @@ export const useUserStore = defineStore({
103 99 return Promise.reject(error);
104 100 }
105 101 },
106   - async getUserInfoAction({ userId }: GetUserInfoByUserIdParams) {
107   - const userInfo = await getUserInfoById({ userId });
  102 + async getUserInfoAction() {
  103 + const userInfo = await getUserInfo();
108 104 const { roles } = userInfo;
109 105 const roleList = roles.map((item) => item.value) as RoleEnum[];
110 106 this.setUserInfo(userInfo);
... ...
src/views/demo/permission/back/Btn.vue
  View file @9e5e630
1 1 <template>
2 2 <PageWrapper contentBackground title="按钮权限控制" contentClass="p-4">
3   - <Alert message="刷新后会还原" show-icon />
4   -
5 3 <CurrentPermissionMode />
6   -
7 4 <p>
8 5 当前拥有的code列表: <a> {{ permissionStore.getPermCodeList }} </a>
9 6 </p>
10 7 <Divider />
11   - <Alert class="mt-4" type="info" message="点击后请查看按钮变化" show-icon />
  8 + <Alert
  9 + class="mt-4"
  10 + type="info"
  11 + message="点击后请查看按钮变化(必须处于后台权限模式才可测试此页面所展示的功能)"
  12 + show-icon
  13 + />
12 14 <Divider />
13   - <a-button type="primary" class="mr-2" @click="changePermissionCode('2')">
  15 + <a-button type="primary" class="mr-2" @click="switchToken(2)" :disabled="!isBackPremissionMode">
14 16 点击切换按钮权限(用户id为2)
15 17 </a-button>
16   - <a-button type="primary" @click="changePermissionCode('1')">
  18 + <a-button type="primary" @click="switchToken(1)" :disabled="!isBackPremissionMode">
17 19 点击切换按钮权限(用户id为1,默认)
18 20 </a-button>
19 21  
20   - <Divider>组件方式判断权限</Divider>
21   - <Authority :value="'1000'">
22   - <a-button type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
23   - </Authority>
  22 + <template v-if="isBackPremissionMode">
  23 + <Divider>组件方式判断权限</Divider>
  24 + <Authority :value="'1000'">
  25 + <a-button type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
  26 + </Authority>
24 27  
25   - <Authority :value="'2000'">
26   - <a-button color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
27   - </Authority>
  28 + <Authority :value="'2000'">
  29 + <a-button color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
  30 + </Authority>
28 31  
29   - <Authority :value="['1000', '2000']">
30   - <a-button color="error" class="mx-4"> 拥有code ['1000','2000']角色权限可见 </a-button>
31   - </Authority>
  32 + <Authority :value="['1000', '2000']">
  33 + <a-button color="error" class="mx-4"> 拥有code ['1000','2000']角色权限可见 </a-button>
  34 + </Authority>
32 35  
33   - <Divider>函数方式方式判断权限</Divider>
34   - <a-button v-if="hasPermission('1000')" type="primary" class="mx-4">
35   - 拥有code ['1000']权限可见
36   - </a-button>
  36 + <Divider>函数方式方式判断权限</Divider>
  37 + <a-button v-if="hasPermission('1000')" type="primary" class="mx-4">
  38 + 拥有code ['1000']权限可见
  39 + </a-button>
37 40  
38   - <a-button v-if="hasPermission('2000')" color="success" class="mx-4">
39   - 拥有code ['2000']权限可见
40   - </a-button>
  41 + <a-button v-if="hasPermission('2000')" color="success" class="mx-4">
  42 + 拥有code ['2000']权限可见
  43 + </a-button>
41 44  
42   - <a-button v-if="hasPermission(['1000', '2000'])" color="error" class="mx-4">
43   - 拥有code ['1000','2000']角色权限可见
44   - </a-button>
  45 + <a-button v-if="hasPermission(['1000', '2000'])" color="error" class="mx-4">
  46 + 拥有code ['1000','2000']角色权限可见
  47 + </a-button>
45 48  
46   - <Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider>
47   - <a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
  49 + <Divider>指令方式方式判断权限(该方式不能动态修改权限.)</Divider>
  50 + <a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有code ['1000']权限可见 </a-button>
48 51  
49   - <a-button v-auth="'2000'" color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
  52 + <a-button v-auth="'2000'" color="success" class="mx-4"> 拥有code ['2000']权限可见 </a-button>
50 53  
51   - <a-button v-auth="['1000', '2000']" color="error" class="mx-4">
52   - 拥有code ['1000','2000']角色权限可见
53   - </a-button>
  54 + <a-button v-auth="['1000', '2000']" color="error" class="mx-4">
  55 + 拥有code ['1000','2000']角色权限可见
  56 + </a-button>
  57 + </template>
54 58 </PageWrapper>
55 59 </template>
56 60 <script lang="ts">
57   - import { defineComponent } from 'vue';
  61 + import { defineComponent, computed } from 'vue';
58 62 import { Alert, Divider } from 'ant-design-vue';
59 63 import CurrentPermissionMode from '../CurrentPermissionMode.vue';
60 64 import { usePermission } from '/@/hooks/web/usePermission';
... ... @@ -62,22 +66,36 @@
62 66 import { usePermissionStore } from '/@/store/modules/permission';
63 67 import { PermissionModeEnum } from '/@/enums/appEnum';
64 68 import { PageWrapper } from '/@/components/Page';
  69 + import { useAppStore } from '/@/store/modules/app';
  70 + import { useUserStore } from '/@/store/modules/user';
65 71  
66 72 export default defineComponent({
67 73 components: { Alert, PageWrapper, CurrentPermissionMode, Divider, Authority },
68 74 setup() {
69 75 const { hasPermission } = usePermission();
70 76 const permissionStore = usePermissionStore();
  77 + const appStore = useAppStore();
  78 + const userStore = useUserStore();
  79 +
  80 + const isBackPremissionMode = computed(
  81 + () => appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK
  82 + );
  83 +
  84 + async function switchToken(userId: number) {
  85 + // 本函数切换用户登录Token的部分仅用于演示，实际生产时切换身份应当重新登录
  86 + const token = 'fakeToken' + userId;
  87 + userStore.setToken(token);
71 88  
72   - function changePermissionCode(userId: string) {
73   - permissionStore.changePermissionCode(userId);
  89 + // 重新获取用户信息和菜单
  90 + userStore.getUserInfoAction();
  91 + permissionStore.changePermissionCode();
74 92 }
75 93  
76 94 return {
77 95 hasPermission,
78 96 permissionStore,
79   - changePermissionCode,
80   - PermissionModeEnum,
  97 + switchToken,
  98 + isBackPremissionMode,
81 99 };
82 100 },
83 101 });
... ...
src/views/demo/permission/back/index.vue
  View file @9e5e630
... ... @@ -12,26 +12,52 @@
12 12 <div class="mt-4">
13 13 权限切换(请先切换权限模式为后台权限模式):
14 14 <a-button-group>
15   - <a-button @click="changeMenu('1')"> 获取用户id为1的菜单 </a-button>
16   - <a-button @click="changeMenu('2')"> 获取用户id为2的菜单 </a-button>
  15 + <a-button @click="switchToken(1)" :disabled="!isBackPremissionMode">
  16 + 获取用户id为1的菜单
  17 + </a-button>
  18 + <a-button @click="switchToken(2)" :disabled="!isBackPremissionMode">
  19 + 获取用户id为2的菜单
  20 + </a-button>
17 21 </a-button-group>
18 22 </div>
19 23 </PageWrapper>
20 24 </template>
21 25 <script lang="ts">
22   - import { defineComponent } from 'vue';
  26 + import { defineComponent, computed } from 'vue';
23 27 import CurrentPermissionMode from '../CurrentPermissionMode.vue';
24 28 import { RoleEnum } from '/@/enums/roleEnum';
25 29 import { usePermission } from '/@/hooks/web/usePermission';
  30 + import { useUserStore } from '/@/store/modules/user';
26 31 import { PageWrapper } from '/@/components/Page';
  32 + import { PermissionModeEnum } from '/@/enums/appEnum';
  33 + import { useAppStore } from '/@/store/modules/app';
27 34 import { Alert } from 'ant-design-vue';
28 35 export default defineComponent({
29 36 components: { Alert, CurrentPermissionMode, PageWrapper },
30 37 setup() {
31   - const { changeMenu } = usePermission();
  38 + const { refreshMenu } = usePermission();
  39 + const userStore = useUserStore();
  40 + const appStore = useAppStore();
  41 +
  42 + const isBackPremissionMode = computed(
  43 + () => appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK
  44 + );
  45 +
  46 + async function switchToken(userId: number) {
  47 + // 本函数切换用户登录Token的部分仅用于演示，实际生产时切换身份应当重新登录
  48 + const token = 'fakeToken' + userId;
  49 + userStore.setToken(token);
  50 +
  51 + // 重新获取用户信息和菜单
  52 + userStore.getUserInfoAction();
  53 + refreshMenu();
  54 + }
  55 +
32 56 return {
33 57 RoleEnum,
34   - changeMenu,
  58 + refreshMenu,
  59 + switchToken,
  60 + isBackPremissionMode,
35 61 };
36 62 },
37 63 });
... ...