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

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

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

1. 基于路由守卫的权限控制

1.1 方案概述

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

1.2 实现步骤

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

1.3 代码示例

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import store from '@/store';// 引入多个组件页面 
import Home from '@/views/Home.vue';
import Admin from '@/views/Admin.vue';
import AddSomeFun from '@/views/AddSomeFun.vue';
import Login from '@/views/Login.vue';// 定义路由，并且在 meta 中定义可访问的角色
const routes = [{ path: '/', component: Home },{ path: '/admin', component: Admin, meta: { roles: ['admin'] } },{ path: '/addSomeFun', component: AddSomeFun, meta: { roles: ['user'] } },{ path: '/login', component: Login }
];// 创建路由
const router = createRouter({history: createWebHistory(),routes
});// 路由校验
router.beforeEach((to, from, next) => {const userRole = store.state.userRole; // 假设 Vuex 中存储了用户 user、管理员 admin 角色if (to.meta.roles && !to.meta.roles.includes(userRole)) {next('/'); // 无权限跳转到首页} else {next();}
});export default router;

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

2.1 方案概述

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

2.2 实现步骤

1. 在 Vue 全局创建一个自定义指令 v-permission。
2. 该指令根据用户权限判断是否显示该元素。

2.3 代码示例

// directives/permission.js
// 指令封装
import { useStore } from 'vuex';export default {install(app) {app.directive('permission', {mounted(el, binding) {const store = useStore();const userRole = store.state.userRole;if (!binding.value.includes(userRole)) {el.parentNode?.removeChild(el);}}});}
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import permissionDirective from './directives/permission';const app = createApp(App);
app.use(store);
app.use(permissionDirective); // 注册自定义指令
app.mount('#app');

<!-- 使用示例 -->
<button v-permission="['admin']">仅管理员可见</button>

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

3.1 方案概述

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

3.2 代码示例

// store/index.js
import { createStore } from 'vuex';export default createStore({state: {userRole: 'user' // 假设存储用户角色},mutations: {setUserRole(state, role) {state.userRole = role;}}
});

<!-- 在组件中使用 Vuex 进行权限判断 -->
<template><button v-if="userRole === 'admin'">仅管理员可见</button>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const userRole = computed(() => store.state.userRole);return { userRole };}
};
</script>

4. 后端返回权限控制

4.1 方案概述

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

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

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

// 登录后获取用户权限，并动态添加路由
import router from '@/router';
import store from '@/store';
import axios from 'axios';async function fetchUserRoutes() {const res = await axios.post('/common/getUserRoutes'); // 假设后端返回路由信息const routes = res.dataroutes.forEach(route => {router.addRoute(route);});
}fetchUserRoutes();

5. 总结

方法	适用场景	优势	缺点
路由守卫	页面级权限控制	适用于完整页面权限	无法控制按钮等细节
Vue 指令	组件、按钮级权限	适用于 UI 级别权限	需要手动移除元素
Vuex/Pinia	组件级权限	适用于灵活权限判断	需要在多个组件中维护权限逻辑
后端返回权限	适用于大规模权限管理	后端统一管理，灵活	需要动态更新前端路由

以上几种方式可以结合使用，根据实际业务需求选择合适的权限控制方式。