权限管理vue如何实现
权限管理在 Vue 中的实现方式
基于路由的权限控制
通过 Vue Router 的全局前置守卫 beforeEach 实现路由拦截，结合用户角色或权限列表动态过滤路由表。
router.beforeEach((to, from, next) => {
const userRole = store.getters.userRole; // 从 Vuex 获取用户角色
if (to.meta.requiresAuth && !hasPermission(userRole, to.meta.roles)) {
next('/forbidden'); // 无权限跳转至禁止页面
} else {
next();
}
});动态菜单渲染
根据权限过滤路由配置，生成侧边栏菜单。
// 过滤有权限的路由
const filteredRoutes = allRoutes.filter(route => {
return hasPermission(userRole, route.meta.roles);
});组件级权限控制
自定义指令 v-permission
注册全局指令，控制组件的显隐。
Vue.directive('permission', {
inserted(el, binding, vnode) {
if (!hasPermission(store.getters.roles, binding.value)) {
el.parentNode.removeChild(el); // 无权限时移除 DOM
}
}
});使用方式：
<button v-permission="['admin']">仅管理员可见</button>后端配合与权限数据流
权限数据格式
后端返回用户权限列表或角色标识，例如：
{
"roles": ["editor"],
"permissions": ["article:edit"]
}API 拦截
在请求拦截器中检查权限，无权限时取消请求：
axios.interceptors.request.use(config => {
if (config.url.includes('/admin') && !store.getters.isAdmin) {
return Promise.reject(new Error('无权限访问'));
}
return config;
});状态管理集成
Vuex 存储权限信息
将用户权限信息存入 Vuex，便于全局访问：
const store = new Vuex.Store({
state: {
roles: []
},
mutations: {
SET_ROLES(state, roles) {
state.roles = roles;
}
}
});权限验证函数
封装通用权限校验方法：
function hasPermission(roles, requiredRoles) {
return requiredRoles.some(role => roles.includes(role));
}按钮级权限的高阶组件
封装权限包装组件
创建高阶组件包裹业务组件，实现更细粒度控制：
const PermissionWrapper = {
functional: true,
render(h, context) {
const { permissions } = context.props;
return hasPermission(store.getters.permissions, permissions)
? context.children
: null;
}
};使用示例：
<permission-wrapper :permissions="['delete']">
<button>删除</button>
</permission-wrapper>
