vue怎么实现权限控制
Vue 权限控制实现方法
路由权限控制
通过路由守卫拦截未授权访问，结合用户角色动态生成路由表。使用router.beforeEach钩子检查用户权限，未通过时重定向到登录页或提示页。
// 示例：路由守卫
router.beforeEach((to, from, next) => {
const hasPermission = checkUserPermission(to.meta.roles);
if (hasPermission) return next();
next('/login');
});动态路由可通过addRoutes方法实现：
// 动态添加路由
const allowedRoutes = filterAsyncRoutes(asyncRoutes, userRoles);
router.addRoutes(allowedRoutes);组件级权限控制
使用自定义指令v-permission控制组件显示，适用于按钮级权限。
// 注册指令
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
// 使用示例
<button v-permission="'admin'">删除</button>全局权限校验方法
在Vue原型上挂载校验方法，便于全局调用。
Vue.prototype.$hasPermission = function(requiredRole) {
return userRoles.includes(requiredRole);
};
// 使用示例
computed: {
showButton() {
return this.$hasPermission('editor');
}
}API请求拦截
在axios拦截器中添加权限验证，拦截未授权的API请求。
axios.interceptors.request.use(config => {
if (!checkAPIPermission(config.url)) {
return Promise.reject(new Error('无权访问'));
}
return config;
});状态管理集成
在Vuex中集中管理权限数据，保持状态同步。
// store模块示例
const permission = {
state: {
roles: [],
routes: []
},
mutations: {
SET_ROLES(state, roles) {
state.roles = roles;
}
}
};服务端配合
前端应配合服务端完成最终权限验证，服务端需对每个请求进行权限校验，避免前端规则被绕过。
权限数据建议采用树形结构存储，支持角色继承和权限组合。权限变更时需及时更新前端存储的权限信息，通常通过重新登录或静默刷新token实现。
