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

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

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

1.2 实现步骤
在 router 配置中为每个路由添加 meta 字段，存储允许访问的角色。
在 Vuex/Pinia 中存储用户角色。
使用 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 实现步骤
在 Vue 全局创建一个自定义指令 v-permission。
在 main.js 引入注册。
该指令根据用户权限判断是否显示该元素。
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 方案概述
后端返回权限控制的方式有两种：

返回用户权限信息：前端获取角色信息后，使用前述方法进行权限控制。
后端返回可访问路由：后端返回用户可以访问的路由列表，前端使用 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.data

routes.forEach(route => {
router.addRoute(route);
});
}

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