vue权限如何实现
Vue 权限实现方案
路由权限控制
通过动态路由实现权限过滤，根据用户角色或权限列表生成可访问的路由表。
使用router.beforeEach全局守卫进行路由拦截：
router.beforeEach((to, from, next) => {
const hasPermission = checkPermission(to.meta.requiresAuth)
if (to.matched.some(record => record.meta.requiresAuth)) {
hasPermission ? next() : next('/login')
} else {
next()
}
})动态添加路由示例：
// 过滤有权限的路由
const filteredRoutes = asyncRoutes.filter(route => {
return hasPermission(route.meta.roles)
})
router.addRoutes(filteredRoutes)组件级权限控制
自定义指令v-permission实现按钮级权限控制：
Vue.directive('permission', {
inserted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})使用方式：
<button v-permission="'user:create'">创建用户</button>状态管理集成
Vuex中存储权限信息，便于全局访问：
state: {
roles: [],
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
}API权限控制
请求拦截器中添加权限校验：
axios.interceptors.request.use(config => {
if (config.requireAuth && !store.getters.hasPermission) {
return Promise.reject(new Error('无访问权限'))
}
return config
})权限数据格式
建议采用树形结构存储权限关系：
{
"id": "user:manage",
"children": [
{"id": "user:create"},
{"id": "user:delete"}
]
}缓存策略
权限变更后需清除缓存并刷新页面：
logout() {
localStorage.removeItem('permissions')
router.go(0)
}服务端配合
前端应配合服务端进行二次验证，所有敏感操作需后端进行最终权限校验。
动态菜单实现
根据权限数据生成导航菜单：
computed: {
menuItems() {
return this.allMenus.filter(menu =>
this.$store.getters.hasPermission(menu.permission)
)
}
}
