Vue3.5 企业级管理系统实战（二十一）：菜单权限

有了菜单及脚色管理后，我们还须要根据用户访问的token，去获取用户信息，根据用户的脚色信息，拉取全部的菜单权限，进而生成左侧菜单树数据。
1 增长获取用户信息 api

在 src/api/user.ts 中，添加获取用户信息的 api（getUserInfo），代码如下：

1. //src/api/user.ts
2. import request from "@/api/config/request";
3. // 从 "./type" 模块中导入 ApiResponse 类型，用于定义接口响应数据的结构
4. import type { ApiResponse } from "./type";
5. import type { IRole } from "./role";
7. /**
8. * 定义用户登录所需的数据结构
9. * @interface IUserLoginData
10. * @property {string} username - 用户登录使用的用户名
11. * @property {string} password - 用户登录使用的密码
12. */
13. export interface IUserLoginData {
14.   username: string;
15.   password: string;
16. }
18. /**
19. * 定义登录接口响应的数据结构
20. * @interface ILoginResponseData
21. * @property {string} token - 登录成功后返回的令牌，用于后续请求的身份验证
22. */
23. export interface ILoginResponseData {
24.   token: string;
25. }
27. /**
28. * 登录接口
29. * @param {IUserLoginData} data - 用户登录所需的数据，包含用户名和密码
30. * @returns {Promise<ApiResponse<ILoginResponseData>>} - 返回一个 Promise 对象，该对象解析为包含登录响应数据的 ApiResponse 类型
31. */
32. export const login = (
33.   data: IUserLoginData
34. ): Promise<ApiResponse<ILoginResponseData>> => {
35.   return request.post("/4642164-4292760-default/287017559", data);
36. };
37. //test
38. export const logout_error = (): Promise<ApiResponse<ILoginResponseData>> => {
39.   return request.post("/4642164-4292760-default/auth/401");
40. };
42. //个人中心接口
43. export interface Profile {
44.   id: number;
45.   username: string;
46.   email: string;
47.   mobile: string;
48.   isSuper: boolean;
49.   status: boolean;
50.   avatar: string;
51.   description: string;
52.   roles: IRole[];
53.   roleIds?: number[]; // 修改用户的时候，后端接受只要id
54. }
56. export interface IUsers {
57.   users: Profile[];
58.   count: number;
59. }
61. // 查询参数
62. export interface IUserQuery {
63.   pageNum?: number;
64.   pageSize?: number;
65.   mobile?: string;
66.   status?: boolean;
67.   username?: string;
68.   flag: number;
69. }
71. // 获取用户列表的接口
72. export const getUsers = (params: IUserQuery): Promise<ApiResponse<IUsers>> => {
73.   const {
74.     pageNum = 0,
75.     pageSize = 10,
76.     username = "",
77.     status,
78.     mobile = "",
79.     flag
80.   } = params;
81.   return request.get("http://127.0.0.1:4523/m1/4642164-4292760-default/user", {
82.     params: {
83.       pageNum,
84.       pageSize,
85.       username,
86.       status,
87.       mobile,
88.       flag
89.     }
90.   });
91. };
93. // 删除用户
94. export const removeUser = (id: number): Promise<ApiResponse> => {
95.   return request.delete(
96.     `http://127.0.0.1:4523/m1/4642164-4292760-default/user/`
97.   );
98. };
100. // 添加用户
101. export const addUser = (data: Profile): Promise<ApiResponse> => {
102.   return request.post(
103.     "http://127.0.0.1:4523/m1/4642164-4292760-default/user",
104.     data
105.   );
106. };
108. // 编辑用户
109. export const updateUser = (id: number, data: Profile): Promise<ApiResponse> => {
110.   return request.put(
111.     `http://127.0.0.1:4523/m1/4642164-4292760-default/user`,
112.     data
113.   );
114. };
116. // 获取用户信息
117. export const getUserInfo = (): Promise<ApiResponse<Profile>> => {
118.   return request.post("/auth/info");
119. };

复制代码

2 修改用户 Store

在 src/stores/user.ts 中，增长获取当前用户信息的方法 getUserInfo，代码如下：

1. //src/stores/user.ts
2. import type { IUserLoginData, IUserQuery, IUsers, Profile } from "@/api/user";
3. import {
4.   login as loginApi,
5.   getUsers as getUsersApi, // 获取用户
6.   addUser as addUserApi,
7.   removeUser as removeUserApi,
8.   updateUser as updateUserApi,
9.   getUserInfo as getUserInfoApi
10. } from "@/api/user";
11. import { setToken, removeToken } from "@/utils/auth";
12. import { useTagsView } from "./tagsView";
13. import type { IRole } from "@/api/role";
15. /**
16. * 用户信息查询参数类型，继承自Profile并添加分页参数
17. */
18. export type IProfileQuery = Profile & {
19.   pageNum?: number;
20.   pageSize?: number;
21. };
23. /**
24. * 用户状态管理
25. */
26. export const useUserStore = defineStore("user", () => {
27.   // 状态管理
28.   const state = reactive({
29.     token: "", // 用户令牌
30.     users: [] as IUsers["users"], // 用户列表
31.     count: 0, // 用户总数
32.     roles: [] as IRole[], // 用户角色列表
33.     userInfo: {} as Profile // 当前用户信息
34.   });
36.   // 引用标签视图模块
37.   const tagsViewStore = useTagsView();
39.   /**
40.    * 获取当前用户信息
41.    */
42.   const getUserInfo = async () => {
43.     const res = await getUserInfoApi();
44.     if (res.code === 0) {
45.       // 解构响应数据，分离角色和用户信息
46.       const { roles, ...info } = res.data;
47.       state.roles = roles; // 存储角色信息
48.       state.userInfo = info as Profile; // 存储用户信息
49.     }
50.   };
52.   /**
53.    * 用户登录
54.    * @param userInfo - 包含用户名和密码的登录信息
55.    */
56.   const login = async (userInfo: IUserLoginData) => {
57.     try {
58.       const { username, password } = userInfo;
59.       // 调用登录API，用户名去除首尾空格
60.       const response = await loginApi({ username: username.trim(), password });
61.       const { data } = response;
62.       state.token = data.token; // 存储令牌
63.       setToken(data.token); // 保存令牌到本地存储
64.     } catch (e) {
65.       return Promise.reject(e); // 登录失败时返回错误
66.     }
67.   };
69.   /**
70.    * 用户注销
71.    */
72.   const logout = () => {
73.     state.token = ""; // 清空令牌
74.     removeToken(); // 移除本地存储的令牌
75.     tagsViewStore.delAllView(); // 清除所有标签视图
76.   };
78.   /**
79.    * 获取全部用户列表
80.    * @param params - 查询参数，包含分页和筛选条件
81.    */
82.   const getAllUsers = async (params: IUserQuery) => {
83.     const res = await getUsersApi(params);
84.     const { data } = res;
85.     state.users = data.users; // 更新用户列表
86.     state.count = data.count; // 更新用户总数
87.   };
89.   /**
90.    * 添加新用户
91.    * @param data - 用户信息，包含分页参数（用于添加成功后刷新列表）
92.    */
93.   const addUser = async (data: IProfileQuery) => {
94.     // 分离分页参数和用户信息
95.     const { pageSize, pageNum, ...params } = data;
96.     const res = await addUserApi(params);
97.     if (res.code === 0) {
98.       // 添加成功后刷新用户列表
99.       getAllUsers({
100.         pageSize,
101.         pageNum
102.       });
103.     }
104.   };
106.   /**
107.    * 删除用户
108.    * @param data - 包含用户ID和分页信息（用于删除成功后刷新列表）
109.    */
110.   const removeUser = async (data: IProfileQuery) => {
111.     const { pageSize, pageNum, id } = data;
112.     const res = await removeUserApi(id);
113.     if (res.code === 0) {
114.       // 删除成功后刷新用户列表
115.       getAllUsers({
116.         pageSize,
117.         pageNum
118.       });
119.     }
120.   };
122.   /**
123.    * 编辑用户信息
124.    * @param data - 用户信息，包含分页参数（用于编辑成功后刷新列表）
125.    */
126.   const editUser = async (data: IProfileQuery) => {
127.     // 分离分页参数和用户信息
128.     const { pageSize, pageNum, ...params } = data;
129.     const res = await updateUserApi(params.id, params);
130.     if (res.code === 0) {
131.       // 编辑成功后刷新用户列表
132.       getAllUsers({
133.         pageSize,
134.         pageNum
135.       });
136.     }
137.   };
139.   // 导出可访问的方法和状态
140.   return {
141.     login,
142.     state,
143.     logout,
144.     getAllUsers,
145.     editUser,
146.     removeUser,
147.     addUser,
148.     getUserInfo
149.   };
150. });

复制代码

3 新增 permission Store 

新增 src/stores/permission.ts，代码如下：

1. //src/stores/permission.ts
2. import type { RouteRecordRaw } from "vue-router";
3. import { useUserStore } from "./user";
4. import { asyncRoutes } from "@/router";
5. import { useMenuStore } from "./menu";
6. import type { MenuData } from "@/api/menu";
7. import path from "path-browserify";
9. /**
10. * 递归生成路由配置
11. * @param routes - 原始路由配置
12. * @param routesPath - 需要保留的路由路径数组
13. * @param basePath - 基础路径，用于解析子路由
14. * @returns 过滤后的路由配置
15. */
16. function generateRoutes(
17.   routes: RouteRecordRaw[],
18.   routesPath: string[],
19.   basePath = "/"
20. ) {
21.   const routerData: RouteRecordRaw[] = [];
23.   routes.forEach((route) => {
24.     // 解析当前路由的完整路径
25.     const routePath = path.resolve(basePath, route.path);
27.     // 递归处理子路由
28.     if (route.children) {
29.       route.children = generateRoutes(route.children, routesPath, routePath);
30.     }
32.     // 路由过滤条件：
33.     // 1. 当前路由路径在允许列表中
34.     // 2. 或者当前路由有子路由
35.     if (
36.       routesPath.includes(routePath) ||
37.       (route.children && route.children.length >= 1)
38.     ) {
39.       routerData.push(route);
40.     }
41.   });
43.   return routerData;
44. }
46. /**
47. * 根据菜单数据过滤异步路由
48. * @param menus - 菜单数据
49. * @param routes - 原始异步路由配置
50. * @returns 过滤后的路由配置
51. */
52. function filterAsyncRoutes(menus: MenuData[], routes: RouteRecordRaw[]) {
53.   // 提取菜单中的路径信息
54.   const routesPath = menus.map((item) => item.path);
56.   // 调用递归生成函数
57.   return generateRoutes(routes, routesPath);
58. }
60. /**
61. * 权限管理模块
62. */
63. export const usePermissionStore = defineStore("permission", () => {
64.   const userStore = useUserStore();
65.   const menuStore = useMenuStore();
67.   // 存储最终生成的可访问路由
68.   let accessMenuRoutes: RouteRecordRaw[] = [];
70.   /**
71.    * 生成可访问的路由配置
72.    * @returns 基于用户角色的可访问路由配置
73.    */
74.   const generateRoutes = async () => {
75.     // 计算属性：获取用户角色名称列表
76.     const rolesNames = computed(() =>
77.       userStore.state.roles.map((item) => item.name)
78.     );
80.     // 计算属性：获取用户角色ID列表
81.     const roleIds = computed(() =>
82.       userStore.state.roles.map((item) => item.id)
83.     );
85.     // 超级管理员角色处理
86.     if (rolesNames.value.includes("super_admin")) {
87.       // 超级管理员拥有全部路由访问权限
88.       accessMenuRoutes = asyncRoutes;
90.       // 获取全部菜单列表
91.       await menuStore.getAllMenuListByAdmin();
93.       return accessMenuRoutes;
94.     } else {
95.       // 普通角色处理：根据角色ID获取对应菜单
96.       await menuStore.getMenuListByRoles(roleIds.value);
98.       // 获取当前用户权限下的菜单列表
99.       const menus = menuStore.state.authMenuList;
101.       // 根据菜单权限过滤路由
102.       accessMenuRoutes = filterAsyncRoutes(menus, asyncRoutes);
104.       return accessMenuRoutes;
105.     }
106.   };
108.   return {
109.     generateRoutes
110.   };
111. });

复制代码

4 修改 permission.ts

修改 src/permission.ts，代码如下：

1. //src/permission.ts
2. // 路由鉴权配置 - 控制用户访问权限和页面导航逻辑
3. import router from "@/router";
4. import NProgress from "nprogress"; // 进度条插件
5. import "nprogress/nprogress.css"; // 进度条样式
6. import { getToken } from "./utils/auth"; // 获取token工具函数
7. import { useUserStore } from "./stores/user"; // 用户状态管理
8. import { usePermissionStore } from "./stores/permission"; // 权限状态管理
10. // 配置进度条选项，不显示旋转加载图标
11. NProgress.configure({ showSpinner: false });
13. // 白名单路由 - 无需登录即可访问的页面
14. const whiteList = ["/login"];
16. /**
17. * 全局前置守卫 - 路由切换前的权限校验
18. * 1. 检查Token有效性
19. * 2. 判断用户权限
20. * 3. 动态生成路由
21. */
22. router.beforeEach(async (to, from) => {
23.   // 开始进度条
24.   NProgress.start();
26.   // 获取本地Token
27.   const hasToken = getToken();
28.   const userStore = useUserStore();
29.   const permissionStore = usePermissionStore();
31.   // 情况1：已登录状态
32.   if (hasToken) {
33.     // 已登录但访问登录页，重定向到首页
34.     if (to.path === "/login") {
35.       NProgress.done(); // 结束进度条
36.       return {
37.         path: "/",
38.         replace: true // 替换历史记录，禁止回退
39.       };
40.     } else {
41.       // 已登录且访问非登录页，校验用户权限（有可能token是伪造的，无效的）
42.       try {
43.         // 检查是否已有用户角色信息
44.         const hasRoles = userStore.state.roles.length > 0;
46.         // 已有角色信息，直接放行
47.         if (hasRoles) {
48.           NProgress.done();
49.           return true;
50.         }
52.         // 没有角色信息，重新获取用户信息
53.         await userStore.getUserInfo();
55.         // 根据用户角色动态生成可访问的路由配置
56.         const routes = await permissionStore.generateRoutes();
58.         // 动态添加路由到路由器
59.         routes.forEach((route) => router.addRoute(route));
61.         // 确保路由添加完成，重新访问目标路径
62.         return router.push({ path: to.path, replace: true });
63.       } catch (error) {
64.         // 获取用户信息失败，可能Token过期或无效
65.         console.error("获取用户信息失败:", error);
67.         // 清除用户状态并跳转到登录页
68.         userStore.logout();
69.         NProgress.done();
71.         // 携带当前路径作为重定向参数
72.         return `/login?redirect=${to.path}`;
73.       }
74.     }
75.   }
77.   // 情况2：未登录状态
78.   else {
79.     // 访问白名单页面，直接放行
80.     if (whiteList.includes(to.path)) {
81.       NProgress.done();
82.       return true;
83.     }
85.     // 非白名单页面，重定向到登录页并记录原始路径
86.     return {
87.       path: "/login",
88.       query: {
89.         redirect: to.path,
90.         ...to.query // 保留原路径的查询参数
91.       }
92.     };
93.   }
94. });

复制代码

5 修改路由配置

修改 src/router/index.ts，代码如下：

1. //src/router/index.ts
2. import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
3. import Layout from "@/layout/index.vue";
4. export const constantRoutes: RouteRecordRaw[] = [
5.   {
6.     path: "/",
7.     component: Layout,
8.     redirect: "/dashboard",
9.     children: [
10.       {
11.         path: "dashboard",
12.         name: "dashboard",
13.         component: () => import("@/views/dashboard/index.vue"),
14.         meta: {
15.           icon: "ant-design:bank-outlined",
16.           title: "dashboard",
17.           affix: true, // 固定在tagsViews中
18.           noCache: true //   不需要缓存
19.         }
20.       }
21.     ]
22.   },
23.   {
24.     path: "/redirect",
25.     component: Layout,
26.     meta: {
27.       hidden: true
28.     },
29.     // 当跳转到  /redirect/a/b/c/d?query=1
30.     children: [
31.       {
32.         path: "/redirect/:path(.*)",
33.         component: () => import("@/views/redirect/index.vue")
34.       }
35.     ]
36.   },
37.   {
38.     path: "/login",
39.     name: "Login",
40.     meta: {
41.       hidden: true
42.     },
43.     component: () => import("@/views/login/index.vue")
44.   }
45. ];
46. export const asyncRoutes: RouteRecordRaw[] = [
47.   {
48.     path: "/documentation",
49.     component: Layout,
50.     redirect: "/documentation/index",
51.     children: [
52.       {
53.         path: "index",
54.         name: "documentation",
55.         component: () => import("@/views/documentation/index.vue"),
56.         meta: {
57.           icon: "ant-design:database-filled",
58.           title: "documentation"
59.         }
60.       }
61.     ]
62.   },
64.   {
65.     path: "/guide",
66.     component: Layout,
67.     redirect: "/guide/index",
68.     children: [
69.       {
70.         path: "index",
71.         name: "guide",
72.         component: () => import("@/views/guide/index.vue"),
73.         meta: {
74.           icon: "ant-design:car-twotone",
75.           title: "guide"
76.         }
77.       }
78.     ]
79.   },
80.   {
81.     path: "/system",
82.     component: Layout,
83.     redirect: "/system/menu",
84.     meta: {
85.       icon: "ant-design:unlock-filled",
86.       title: "system",
87.       alwaysShow: true
88.       // breadcrumb: false
89.       // 作为父文件夹一直显示
90.     },
91.     children: [
92.       {
93.         path: "menu",
94.         name: "menu",
95.         component: () => import("@/views/system/menu/index.vue"),
96.         meta: {
97.           icon: "ant-design:unlock-filled",
98.           title: "menu"
99.         }
100.       },
102.       {
103.         path: "role",
104.         name: "role",
105.         component: () => import("@/views/system/role/index.vue"),
106.         meta: {
107.           icon: "ant-design:unlock-filled",
108.           title: "role"
109.         }
110.       },
111.       {
112.         path: "user",
113.         name: "user",
114.         component: () => import("@/views/system/user/index.vue"),
115.         meta: {
116.           icon: "ant-design:unlock-filled",
117.           title: "user"
118.         }
119.       }
120.     ]
121.   },
123.   {
124.     path: "/external-link",
125.     component: Layout,
126.     children: [
127.       {
128.         path: "http://www.baidu.com",
129.         redirect: "/",
130.         meta: {
131.           icon: "ant-design:link-outlined",
132.           title: "link Baidu"
133.         }
134.       }
135.     ]
136.   }
137. ];
138. // 需要根据用户赋予的权限来动态添加异步路由
139. export const routes = [...constantRoutes];
140. export default createRouter({
141.   routes, // 路由表
142.   history: createWebHistory() //  路由模式
143. });

复制代码

以上就是菜单权限相关内容。

下一篇将继承探讨 动态菜单的实现，敬请期待~ 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。