vue权限实现
权限控制实现方式
Vue中实现权限控制通常分为前端路由权限和页面元素权限两类。以下是常见的实现方案：
路由权限控制
- 动态路由表
通过用户登录后返回的权限数据，动态生成可访问的路由表。使用
router.addRoutes方法添加权限路由。
// 过滤有权限的路由
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
})
}- 路由守卫拦截
在全局路由守卫
beforeEach中检查目标路由是否在权限列表中。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.getters.roles.includes(to.meta.role)) {
next('/403')
} else {
next()
}
})页面元素权限
- 自定义指令控制
创建
v-permission指令，根据权限动态显示/隐藏DOM元素。
Vue.directive('permission', {
inserted(el, binding) {
if (!store.getters.roles.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})- 组件封装
创建权限组件包裹需要控制的内容，通过
v-if判断。
<template>
<auth :value="'admin'">
<button>删除</button>
</auth>
</template>
<script>
export default {
props: ['value'],
computed: {
hasPermission() {
return this.$store.getters.roles.includes(this.value)
}
},
render() {
return this.hasPermission ? this.$slots.default[0] : null
}
}
</script>权限数据管理
- 权限数据结构 通常采用树形结构存储权限信息，包含路由名称、操作权限标识等字段。
{
id: 1,
name: 'dashboard',
meta: { title: 'Dashboard', icon: 'dashboard' },
children: [
{
id: 2,
name: 'admin',
meta: { title: 'Admin', role: 'admin' }
}
]
}- 状态管理 使用Vuex集中管理权限状态，确保全局访问一致性。
const store = new Vuex.Store({
state: {
roles: []
},
mutations: {
SET_ROLES(state, roles) {
state.roles = roles
}
}
})最佳实践建议
- 权限验证应同时在前端和后端实现，前端控制展示，后端校验请求
- 敏感操作必须经过服务端二次验证
- 对无权限访问尝试应统一跳转至403页面
- 权限变更后需要刷新页面或重新获取权限数据
- 开发环境可配置权限开关便于调试
