vue实现权限控制
Vue 权限控制实现方案
权限控制在 Vue 项目中通常涉及路由权限和 UI 元素权限两个方面。以下是常见的实现方法：
基于路由的权限控制
通过路由守卫拦截未授权访问，动态生成可访问路由：
// router/index.js
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
const userRoles = getUserRoles() // 获取用户角色
if (to.meta.requiresAuth && !hasToken) {
next('/login')
} else if (to.meta.roles && !to.meta.roles.includes(userRoles)) {
next('/403') // 无权限页面
} else {
next()
}
})动态路由添加
根据用户权限动态生成可访问路由表：
// 过滤异步路由表
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
} else {
return true
}
})
}
// 动态添加路由
store.dispatch('GenerateRoutes', roles).then(accessRoutes => {
router.addRoutes(accessRoutes)
})组件级权限控制
通过自定义指令实现按钮级权限控制：
// 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)
}
} else {
throw new Error('需要指定权限数组')
}
}
})使用方式：
<button v-permission="['admin']">管理员按钮</button>状态管理集成
在 Vuex 中管理权限状态：
// store/modules/permission.js
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = asyncRoutes
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}API 请求拦截
在 axios 拦截器中处理权限相关错误：
service.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
// 处理未授权
router.push('/login')
} else if (error.response.status === 403) {
// 处理无权限
Message.error('无权限访问该资源')
}
return Promise.reject(error)
}
)权限数据格式示例
典型的后端返回权限数据结构：
{
"roles": ["editor"],
"permissions": [
"article:edit",
"article:view"
],
"routes": [
"/article/list",
"/article/edit"
]
}混合权限控制策略
结合前端控制与后端验证：
- 前端控制界面元素显示和路由导航
- 后端验证每个 API 请求的权限
- 敏感操作需要双重验证
以上方案可根据项目需求组合使用，建议中小型项目采用前端路由控制为主，大型复杂系统应加强后端权限验证。
