vue的权限控制实现
Vue 权限控制实现方法
路由级权限控制
通过路由守卫（beforeEach）实现动态路由过滤，结合用户角色控制可访问路由表。典型代码如下：
// router.js
router.beforeEach((to, from, next) => {
const hasPermission = checkUserPermission(to.meta.roles)
if (hasPermission) next()
else next('/403')
})组件级权限控制
使用自定义指令v-permission控制组件渲染，适用于按钮/菜单等细粒度控制：
// main.js
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})接口级权限控制
在请求拦截器中添加权限验证：
// axios.interceptors.request.use
config.headers['X-Access-Token'] = getToken()
if (config.url.includes('/admin') && !isAdmin()) {
return Promise.reject(new Error('无权限访问'))
}动态菜单生成
根据权限树生成可访问菜单：
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (hasPermission(roles, route.meta?.roles)) {
if (route.children) {
route.children = filterAsyncRoutes(route.children, roles)
}
return true
}
return false
})
}状态管理集成
Vuex中存储权限信息便于全局访问：
// store/modules/permission.js
state: {
routes: [],
addRoutes: []
},
mutations: {
SET_ROUTES(state, routes) {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}最佳实践建议
- 采用RBAC（基于角色的访问控制）模型设计权限系统
- 后端应进行二次权限验证确保安全性
- 敏感操作需结合验证码或二次确认
- 权限变更时及时清除前端缓存
常见问题处理
权限失效时自动跳转登录页：
router.onError((error) => {
if (/Unauthorized/.test(error.message)) {
removeToken()
next({ path: '/login' })
}
})
