vue 实现权限管理
路由权限控制
通过Vue Router的全局守卫beforeEach实现路由拦截，结合用户角色动态过滤可访问路由表。定义基础路由和动态路由，动态路由根据后端返回的角色权限数据动态添加。
// router.js
const dynamicRoutes = [
{ path: '/admin', component: Admin, meta: { roles: ['admin'] } },
{ path: '/editor', component: Editor, meta: { roles: ['editor'] } }
]
router.beforeEach((to, from, next) => {
const userRole = store.getters.role
if (to.meta?.roles && !to.meta.roles.includes(userRole)) {
next('/403')
} else {
next()
}
})菜单权限控制
基于用户权限动态生成导航菜单，使用v-if或自定义指令控制菜单项显示。建议将权限数据与菜单配置分离，通过权限码映射关系实现控制。
<template>
<el-menu>
<el-submenu
v-for="menu in filteredMenus"
:key="menu.path"
v-permission="menu.permission"
>
<!-- 菜单内容 -->
</el-submenu>
</el-menu>
</template>
<script>
export default {
computed: {
filteredMenus() {
return this.menus.filter(menu =>
this.$store.getters.permissions.includes(menu.permission)
)
}
}
}
</script>按钮级权限控制
自定义指令v-permission实现按钮粒度控制，或使用权限判断函数包裹按钮组件。指令内部通过比对权限码列表决定是否渲染DOM。
// directives.js
Vue.directive('permission', {
inserted(el, binding, vnode) {
const permissions = vnode.context.$store.getters.permissions
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})API权限控制
在请求拦截器中添加权限校验，对无权限的请求直接拦截。建议与后端约定状态码，前端统一处理403状态。
// axios.interceptors.request.use
const apiPermissionMap = {
'/delete': 'delete_permission'
}
service.interceptors.request.use(config => {
const requiredPerm = apiPermissionMap[config.url]
if (requiredPerm && !store.getters.permissions.includes(requiredPerm)) {
return Promise.reject(new Error('无操作权限'))
}
return config
})权限数据管理
使用Vuex集中管理权限数据，包含角色信息、权限列表等。通过action异步获取权限数据，getter提供快捷访问。
// store/modules/permission.js
const state = {
roles: [],
permissions: []
}
const actions = {
async getPermissions({ commit }) {
const res = await api.getPermissions()
commit('SET_PERMISSIONS', res.data)
}
}动态路由加载
利用router.addRoutes实现路由动态注册，结合后端返回的权限数据过滤出有效路由。注意404路由需最后添加。
// 过滤动态路由
function filterRoutes(routes, permissions) {
return routes.filter(route => {
if (route.meta?.permission) {
return permissions.includes(route.meta.permission)
}
return true
})
}权限指令扩展
对于复杂场景可扩展指令功能，支持权限组合校验（AND/OR逻辑），通过修饰符指定校验模式。
Vue.directive('permission', {
inserted(el, binding) {
const { value, modifiers } = binding
const hasPermission = checkPermission(value, modifiers)
if (!hasPermission) el.parentNode && el.parentNode.removeChild(el)
}
})
function checkPermission(value, modifiers) {
// 实现AND/OR逻辑判断
}权限变更处理
监听权限变化事件，当检测到权限变更时重新初始化路由和菜单。典型场景包括角色切换、权限刷新等。
watch: {
'$store.getters.permissions'(newVal) {
this.initRoutes()
this.generateMenu()
}
}
