vue权限管理实现
Vue 权限管理实现方案
基于路由的动态权限控制
在router/index.js中定义静态路由和动态路由，通过addRoute方法动态添加路由。结合后端返回的权限标识过滤路由表：
// 示例：过滤动态路由
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自定义指令，用于控制DOM元素的显示/隐藏：
// directives/permission.js
export default {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters && store.getters.permissions
if (value && value instanceof Array && value.length > 0) {
const hasPermission = permissions.some(perm => {
return value.includes(perm)
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}
}按钮级权限控制
在组件中使用权限判断方法控制按钮显示：
<template>
<button v-if="checkPermission(['admin'])">管理员按钮</button>
</template>
<script>
export default {
methods: {
checkPermission(perms) {
return this.$store.getters.permissions.some(p => perms.includes(p))
}
}
}
</script>菜单权限过滤
根据用户权限过滤导航菜单数据：
// utils/permission.js
export function filterMenus(menus, permissions) {
return menus.filter(menu => {
if (menu.meta && menu.meta.permissions) {
return menu.meta.permissions.some(p => permissions.includes(p))
}
return true
})
}权限数据持久化
使用vuex-persistedstate插件保持权限状态：
// store/index.js
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
plugins: [createPersistedState({
key: 'auth',
paths: ['permissions', 'roles']
})]
})接口权限拦截
在axios拦截器中验证API权限：
// utils/request.js
service.interceptors.request.use(config => {
const permission = store.getters.permissions
if (config.url.includes('/admin/') && !permission.includes('admin')) {
return Promise.reject(new Error('无权限访问'))
}
return config
})权限初始化流程
在应用入口文件完成权限初始化：
// main.js
router.beforeEach(async (to, from, next) => {
if (!store.getters.permissions.length) {
const { permissions } = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', permissions)
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
} else {
next()
}
})权限数据格式示例
建议的权限数据结构：
{
"roles": ["editor"],
"permissions": ["article:edit", "user:view"],
"menus": [
{
"path": "/articles",
"meta": { "permissions": ["article:view"] }
}
]
}
