vue怎么实现权限控制
Vue 权限控制实现方法
路由级权限控制
通过路由守卫（router.beforeEach）实现动态路由添加或权限校验。在用户登录后获取权限数据，过滤生成可访问路由表。
// 示例：动态路由过滤
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (hasPermission(roles, route)) {
if (route.children) {
route.children = filterAsyncRoutes(route.children, roles)
}
return true
}
return false
})
}组件级权限控制
使用自定义指令v-permission实现按钮/组件级别的权限控制，通过比对权限码决定是否渲染元素。
// 注册权限指令
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters.permissions
if (!permissions.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})接口级权限控制
在请求拦截器中校验接口权限，无权限的请求直接拦截并提示。可与后端配合返回403状态码。
axios.interceptors.request.use(config => {
if (!checkApiPermission(config.url)) {
return Promise.reject(new Error('无访问权限'))
}
return config
})权限数据管理
建议使用Vuex集中管理权限数据，包含角色列表、权限码映射表等。登录成功后通过commit更新状态。
// Vuex store示例
const store = new Vuex.Store({
state: {
roles: [],
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
}
})权限映射方案
可采用RBAC（基于角色的访问控制）模型，设计角色-权限-资源的映射关系。前端存储权限标识符（如user:add），后端返回用户拥有的权限集合。
动态菜单渲染
根据权限数据递归生成导航菜单，过滤无权限的菜单项。建议使用<router-link>配合v-for实现动态渲染。
<template>
<el-menu>
<router-link
v-for="route in permission_routes"
:key="route.path"
:to="route.path">
{{ route.meta.title }}
</router-link>
</el-menu>
</template>错误处理
无权限访问时跳转404页面或显示空白页，建议在路由配置中添加404兜底路由。可通过全局错误捕获处理权限异常。
router.onError(error => {
if (/Unauthorized/.test(error.message)) {
router.push('/403')
}
})注意事项
- 权限数据需在前端做持久化（如localStorage），避免刷新丢失
- 敏感权限校验必须依赖后端二次验证
- 按钮级权限控制需考虑v-if和v-show的性能差异
- 动态路由添加时注意避免重复注册
- 生产环境应混淆权限相关代码，防止控制台绕过
