vue 实现权限
Vue 实现权限控制的方法
在 Vue 项目中实现权限控制通常涉及前端路由权限、按钮权限和 API 权限等多个层面。以下是几种常见的实现方式：
基于路由的权限控制
使用 Vue Router 的全局前置守卫 beforeEach 拦截路由跳转，结合用户角色或权限列表动态生成可访问的路由表。
// router.js
router.beforeEach((to, from, next) => {
const userRole = localStorage.getItem('userRole');
const requiredRole = to.meta.requiredRole;
if (!requiredRole || userRole === requiredRole) {
next();
} else {
next('/forbidden');
}
});动态路由添加
通过后端返回的权限列表动态生成路由表，仅添加用户有权限访问的路由。
// 动态添加路由
function addRoutes() {
const allowedRoutes = fetchUserRoutes(); // 从后端获取权限路由
allowedRoutes.forEach(route => {
router.addRoute(route);
});
}指令式权限控制
自定义 Vue 指令 v-permission 控制按钮或元素的显示隐藏。
// main.js
Vue.directive('permission', {
inserted(el, binding) {
const userPermissions = store.state.user.permissions;
if (!userPermissions.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
// 使用方式
<button v-permission="'create_user'">创建用户</button>组合式 API 权限控制
在 Vue 3 中使用组合式 API 封装权限逻辑，方便复用。
// usePermission.js
import { computed } from 'vue';
import { useStore } from 'vuex';
export function usePermission() {
const store = useStore();
const hasPermission = (permission) => {
return computed(() => store.state.user.permissions.includes(permission));
};
return { hasPermission };
}
// 组件中使用
const { hasPermission } = usePermission();
const canEdit = hasPermission('edit_post');权限数据管理
将用户权限信息存储在 Vuex 或 Pinia 中，保持全局状态同步。
// store/modules/user.js
export default {
state: {
permissions: []
},
mutations: {
setPermissions(state, permissions) {
state.permissions = permissions;
}
},
actions: {
async fetchPermissions({ commit }) {
const res = await api.getUserPermissions();
commit('setPermissions', res.data);
}
}
};接口权限拦截
在 axios 拦截器中检查接口权限，无权限时取消请求或提示。
// http.js
instance.interceptors.request.use(config => {
const requiredPermission = config.meta?.permission;
if (requiredPermission && !store.getters.hasPermission(requiredPermission)) {
return Promise.reject(new Error('无权限访问'));
}
return config;
});以上方法可以单独使用或组合使用，具体选择取决于项目需求和复杂度。对于中小型项目，路由守卫结合自定义指令通常足够；大型项目可能需要更完善的动态路由和细粒度权限控制方案。
