各位观众老爷，晚上好！今天咱们来聊聊 Vue 权限管理这档子事。保证让你听完之后，面对权限管理，腰不酸了，腿不疼了，走路也有劲儿了！
一、权限管理是个啥？为啥要它？
想象一下，你的网站是个豪华大别墅，不同的用户就是不同的访客。总不能谁都能进你的卧室、书房，甚至金库吧？权限管理就是给你的大别墅装上门禁系统，谁能进哪个房间，能干些啥，都得安排得明明白白。
简单来说，权限管理就是控制用户能访问哪些资源（页面、按钮、数据等），能执行哪些操作。没有它，你的应用就成了不设防的城市，随便谁都能来捣乱。
二、权限管理的三大金刚：路由权限、按钮权限、数据权限
这三个家伙各司其职，共同守护着你的应用安全：
- 路由权限： 控制用户能访问哪些页面。比如，管理员能看到所有页面，普通用户只能看到部分页面。
- 按钮权限： 控制用户能点击哪些按钮。比如，只有管理员才能删除文章，普通用户只能查看。
- 数据权限： 控制用户能看到哪些数据。比如，销售人员只能看到自己负责的客户信息，不能看到其他销售人员的客户信息。
三、Vue 权限管理系统设计：兵来将挡，水来土掩
我们来设计一个通用的 Vue 权限管理系统，能够应对各种复杂的权限需求。
-
权限模型设计：角色、权限、用户
- 用户 (User)： 拥有一个或多个角色。
- 角色 (Role)： 拥有一个或多个权限。
- 权限 (Permission)： 定义了用户可以访问的资源或执行的操作。
可以用以下表格简单描述：
对象 属性 说明 -
示例代码 (TypeScript)：
interface User { id: number; username: string; roles: Role[]; } interface Role { id: number; name: string; permissions: Permission[]; } interface Permission { id: number; name: string; code: string; // 权限编码，例如：'user:create' }
-
用户信息存储：
用户信息通常存储在
Vuex或Pinia中，以便在整个应用中共享。用户登录后，将用户信息（包括角色和权限）从后端API获取并存储到 Vuex 或 Pinia 中。// Vuex 示例 const state = { user: null as User | null, permissions: [] as string[] // 存储权限编码 }; const mutations = { SET_USER(state: any, user: User) { state.user = user; }, SET_PERMISSIONS(state: any, permissions: string[]) { state.permissions = permissions; } }; const actions = { async login({ commit }: any, userInfo: any) { // 模拟登录请求 const response = await fetch('/api/login', { method: 'POST', body: JSON.stringify(userInfo) }); const data = await response.json(); // 假设后端返回的用户信息包含角色和权限 const user = data.user as User; commit('SET_USER', user); // 从用户角色中提取所有权限编码 const permissions = user.roles.reduce((acc: string[], role: Role) => { return acc.concat(role.permissions.map(p => p.code)); }, []); commit('SET_PERMISSIONS', permissions); } }; const getters = { hasPermission: (state: any) => (permission: string) => { return state.permissions.includes(permission); } }; export default { state, mutations, actions, getters }; -
路由权限控制：路由守卫
使用 Vue Router 的
beforeEach导航守卫，在路由跳转前检查用户是否拥有访问该路由的权限。import Vue from 'vue'; import VueRouter, { RouteConfig } from 'vue-router'; import store from './store'; // 你的 Vuex store Vue.use(VueRouter); const routes: Array<RouteConfig> = [ { path: '/home', name: 'Home', component: () => import('./views/Home.vue'), meta: { requiresAuth: true } // 标记需要权限认证 }, { path: '/admin', name: 'Admin', component: () => import('./views/Admin.vue'), meta: { requiresAuth: true, permission: 'admin:view' } // 需要 admin:view 权限 }, { path: '/login', name: 'Login', component: () => import('./views/Login.vue') } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { // 检查用户是否已登录 if (!store.state.user) { next({ path: '/login', query: { redirect: to.fullPath } // 登录后重定向到目标页面 }); } else { // 检查是否有权限 if (to.meta.permission) { if (store.getters.hasPermission(to.meta.permission)) { next(); } else { // 没有权限，跳转到 403 页面或显示错误信息 next('/403'); // 假设你有一个 403 页面 } } else { // 不需要特定权限，直接放行 next(); } } } else { // 不需要权限认证的页面，直接放行 next(); } }); export default router; -
按钮权限控制：自定义指令
使用 Vue 的自定义指令，根据用户权限动态显示或隐藏按钮。
// permission.ts import Vue from 'vue'; import store from './store'; Vue.directive('permission', { inserted(el, binding) { const { value } = binding; if (value && value instanceof String) { if (store.getters.hasPermission(value)) { return; } // 没有权限，移除该元素 el.parentNode.removeChild(el); } else { throw new Error(`Need permission like v-permission="'permission:code'"`); } } });在组件中使用：
<template> <div> <button v-permission="'user:create'">创建用户</button> <button v-permission="'user:edit'">编辑用户</button> <button v-permission="'user:delete'">删除用户</button> </div> </template> <script> export default { name: 'UserList' } </script> -
数据权限控制：后端 API 配合
数据权限的控制需要在后端 API 中实现。后端 API 应该根据用户的角色和权限，返回相应的数据。前端只需要根据 API 返回的数据进行展示即可。
例如，获取用户列表的 API：
- 管理员：返回所有用户列表
- 普通用户：只能看到自己的用户信息
前端代码：
<template> <div> <ul> <li v-for="user in users" :key="user.id">{{ user.username }}</li> </ul> </div> </template> <script> import { getUsers } from '@/api/user'; // 假设你有一个获取用户列表的 API export default { name: 'UserList', data() { return { users: [] } }, async mounted() { this.users = await getUsers(); } } </script>后端 API (例如使用 Node.js + Express)：
// 假设你已经实现了用户认证和权限验证 app.get('/api/users', authenticate, authorize('user:view'), (req, res) => { const user = req.user; // 当前登录用户 const role = user.role; // 当前登录用户的角色 let users = []; if (role === 'admin') { // 管理员，返回所有用户 users = db.users; } else { // 普通用户，只返回自己的信息 users = db.users.filter(u => u.id === user.id); } res.json(users); });在这个例子中，
authenticate是一个中间件，用于验证用户是否已登录。authorize('user:view')是一个中间件，用于验证用户是否拥有user:view权限。只有通过了这两个验证，才能访问/api/users接口。 -
与后端 API 动态集成：权限配置
为了实现动态集成，我们需要将权限配置存储在后端数据库中。前端在初始化时，从后端 API 获取权限配置，并将其存储到 Vuex 或 Pinia 中。
- 后端 API： 提供一个接口，返回所有角色、权限和用户的信息。
- 前端： 在应用启动时，调用该接口，将返回的数据存储到 Vuex 或 Pinia 中。
// 在 Vuex 的 actions 中 async initPermissions({ commit }: any) { const response = await fetch('/api/permissions'); const data = await response.json(); // 假设后端返回的数据包含 roles, permissions, users const { roles, permissions, users } = data; // 将数据存储到 Vuex 中 // commit('SET_ROLES', roles); // commit('SET_PERMISSIONS', permissions); // commit('SET_USERS', users); }
四、代码优化和注意事项
- 权限缓存： 将用户权限信息存储在 localStorage 或 sessionStorage 中，避免每次刷新页面都重新获取权限。
- 错误处理： 当用户没有权限访问某个资源时，应该友好地提示用户，而不是直接崩溃。
- 可配置性： 将权限相关的配置项（例如，403 页面路径、权限编码等）提取到配置文件中，方便修改。
- 测试： 编写单元测试和集成测试，确保权限管理系统的正确性。
五、总结：权限管理，任重道远
Vue 权限管理是一个复杂的问题，需要根据具体的业务需求进行设计和实现。希望今天的讲解能帮助你更好地理解 Vue 权限管理，并能应用到你的项目中。记住，权限管理不是一蹴而就的，需要不断地迭代和完善。
下次有机会再和大家聊聊更高级的权限管理技巧，比如 RBAC (Role-Based Access Control)、ABAC (Attribute-Based Access Control) 等。
感谢大家的观看，祝大家编码愉快！