vue权限实现
Vue 权限实现方案
基于路由的权限控制
通过路由守卫实现权限验证，在路由配置中添加meta字段标记权限要求。在router.beforeEach中检查用户权限与路由要求的匹配情况。
// router.js
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true, roles: ['admin'] }
}
]
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles
if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/forbidden')
} else {
next()
}
})动态菜单生成
根据用户权限动态生成可访问的路由菜单，通常在登录后调用addRoutes添加有权限的路由。
// 过滤有权限的路由
function filterRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return route.meta.roles.some(role => roles.includes(role))
}
return true
})
}组件级权限控制
创建自定义指令v-permission实现按钮级别的权限控制，在指令中检查用户权限。
// main.js
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const hasPermission = roles.some(role => value.includes(role))
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}
})
// 使用方式
<button v-permission="['admin']">删除</button>权限数据管理
使用Vuex集中管理权限状态，包括用户角色、权限列表等信息，并提供相关getters和方法。
// store/modules/user.js
const state = {
roles: [],
permissions: []
}
const mutations = {
SET_ROLES: (state, roles) => {
state.roles = roles
}
}API请求拦截
在axios拦截器中验证请求权限，对无权限的请求返回特定状态码或提示信息。
// utils/request.js
service.interceptors.response.use(
response => {
if (response.data.code === 403) {
Message.error('无权限访问')
return Promise.reject('无权限')
}
return response.data
}
)权限指令扩展
对于更复杂的权限控制场景，可以扩展权限指令支持多种权限校验方式。
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters.permissions
// 支持字符串或数组格式
const checkValue = Array.isArray(value) ? value : [value]
const hasPermission = permissions.some(perm => checkValue.includes(perm))
if (!hasPermission) {
el.style.display = 'none'
}
}
})以上方案可根据实际项目需求组合使用或单独实现，核心思想是将权限验证逻辑集中管理，避免分散在各个组件中。对于大型应用，建议将权限相关代码组织为独立模块便于维护。
