vue实现不同用户权限的方法

Vue 实现不同用户权限的方法

在项目中，实现不同用户的权限控制是常见的需求也是常见的功能模块，例如管理系统中不同角色（管理员、普通用户等）应有不同的访问权限，小程序、App等在不同角色登入的时候显示的首页以及跳转访问不同的页面。本文将以 vue 为主要的代码框架介绍几种常见的权限控制方式。
1. 基于路由守卫的权限控制

1.1 方案概述

基于 Vue Router 的 beforeEach 进行全局路由守卫控制。我们可以在 vuex 或 pinia 中存储用户角色，并在路由的 meta 字段中定义允许访问的角色。
1.2 实现步骤

• 在 router 配置中为每个路由添加 meta 字段，存储允许访问的角色。
  
• 在 Vuex/Pinia 中存储用户角色。
  
• 使用 router.beforeEach 进行权限校验。
  

1.3 代码示例

1. // router/index.js
2. import { createRouter, createWebHistory } from 'vue-router';
3. import store from '@/store';
5. // 引入多个组件页面
6. import Home from '@/views/Home.vue';
7. import Admin from '@/views/Admin.vue';
8. import AddSomeFun from '@/views/AddSomeFun.vue';
9. import Login from '@/views/Login.vue';
11. // 定义路由，并且在 meta 中定义可访问的角色
12. const routes = [
13.   { path: '/', component: Home },
14.   { path: '/admin', component: Admin, meta: { roles: ['admin'] } },
15.   { path: '/addSomeFun', component: AddSomeFun, meta: { roles: ['user'] } },
16.   { path: '/login', component: Login }
17. ];
19. // 创建路由
20. const router = createRouter({
21.   history: createWebHistory(),
22.   routes
23. });
25. // 路由校验
26. router.beforeEach((to, from, next) => {
27.   const userRole = store.state.userRole; // 假设 Vuex 中存储了用户 user、管理员 admin 角色
28.   if (to.meta.roles && !to.meta.roles.includes(userRole)) {
29.     next('/'); // 无权限跳转到首页
30.   } else {
31.     next();
32.   }
33. });
35. export default router;

复制代码

2. 基于 Vue 指令的权限控制

2.1 方案概述

使用 Vue 指令 v-permission 来控制按钮、组件或模块的显示隐藏。
2.2 实现步骤

• 在 Vue 全局创建一个自定义指令 v-permission。
  
• 在 main.js 引入注册。
  
• 该指令根据用户权限判断是否显示该元素。
  

2.3 代码示例

1. // directives/permission.js
2. // 指令封装
3. import { useStore } from 'vuex';
5. export default {
6.   install(app) {
7.     app.directive('permission', {
8.       mounted(el, binding) {
9.         const store = useStore();
10.         const userRole = store.state.userRole;
11.         if (!binding.value.includes(userRole)) {
12.           el.parentNode?.removeChild(el);
13.         }
14.       }
15.     });
16.   }
17. };

复制代码

1. // main.js
2. import { createApp } from 'vue';
3. import App from './App.vue';
4. import store from './store';
5. import permissionDirective from './directives/permission';
7. const app = createApp(App);
8. app.use(store);
9. app.use(permissionDirective); // 注册自定义指令
10. app.mount('#app');

复制代码

1. <button v-permission="['admin']">仅管理员可见</button>

复制代码

3. 基于 Vuex（或 Pinia）的权限控制

3.1 方案概述

在 Vuex/Pinia 中存储权限信息，并在组件中通过 computed 计算属性动态控制组件或按钮的显示。
3.2 代码示例

1. // store/index.js
2. import { createStore } from 'vuex';
4. export default createStore({
5.   state: {
6.     userRole: 'user' // 假设存储用户角色
7.   },
8.   mutations: {
9.     setUserRole(state, role) {
10.       state.userRole = role;
11.     }
12.   }
13. });

复制代码

1.   <button v-permission="['admin']">仅管理员可见</button>

复制代码

4. 后端返回权限控制

4.1 方案概述

后端返回权限控制的方式有两种：

• 返回用户权限信息：前端获取角色信息后，使用前述方法进行权限控制。
  
• 后端返回可访问路由：后端返回用户可以访问的路由列表，前端使用 router.addRoute 动态注册。
  

4.2 代码示例（后端返回路由）

1. // 登录后获取用户权限，并动态添加路由
2. import router from '@/router';
3. import store from '@/store';
4. import axios from 'axios';
6. async function fetchUserRoutes() {
7.   const res = await axios.post('/common/getUserRoutes'); // 假设后端返回路由信息
8.   const routes = res.data
9.   
10.   routes.forEach(route => {
11.     router.addRoute(route);
12.   });
13. }
15. fetchUserRoutes();

复制代码

5. 总结

方法适用场景优势缺点路由守卫页面级权限控制适用于完整页面权限无法控制按钮等细节Vue 指令组件、按钮级权限适用于 UI 级别权限需要手动移除元素Vuex/Pinia组件级权限适用于灵活权限判断需要在多个组件中维护权限逻辑后端返回权限适用于大规模权限管理后端统一管理，灵活需要动态更新前端路由以上几种方式可以结合使用，根据实际业务需求选择合适的权限控制方式。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！