Vue怎么实现权限验证
Vue 权限验证的实现方法
路由级权限控制
使用 Vue Router 的导航守卫（beforeEach）进行路由拦截，结合用户角色或权限列表动态过滤可访问路由。
// router.js
router.beforeEach((to, from, next) => {
const userRole = localStorage.getItem('userRole');
const requiredRole = to.meta.role;
if (requiredRole && userRole !== requiredRole) {
next('/forbidden');
} else {
next();
}
});组件级权限控制
通过自定义指令 v-permission 实现按钮/元素的权限控制，在指令中判断用户权限是否匹配。
// main.js
Vue.directive('permission', {
inserted(el, binding, vnode) {
const userPermissions = store.state.user.permissions;
if (!userPermissions.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
});动态菜单生成
根据用户权限动态生成侧边栏菜单，通常与路由配置结合使用。在路由配置中添加 meta 字段标记权限标识。
// routes.js
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, permission: 'manage_users' }
}接口级权限验证
在 Axios 拦截器中添加权限 Token，并在响应拦截器中处理 403 权限错误。
// api.js
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${getToken()}`;
return config;
});
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 403) {
router.push('/forbidden');
}
return Promise.reject(error);
}
);状态管理集成
在 Vuex 中集中管理权限数据，通过 getters 提供权限判断方法。
// store.js
const store = new Vuex.Store({
state: {
user: {
roles: [],
permissions: []
}
},
getters: {
hasPermission: state => permission => {
return state.user.permissions.includes(permission);
}
}
});服务端配合
前端实现需与后端配合，确保：
- 登录接口返回用户权限数据
- 每个接口验证权限有效性
- 提供权限列表/角色列表查询接口
代码组织建议
- 将权限常量提取为单独文件（如
permission.js） - 对高敏感路由采用服务端二次验证
- 定期清理本地存储的权限标记
- 实现权限变更的实时响应（通过 WebSocket 或轮询）
