vue实现权限分离
Vue 权限分离实现方案
权限分离通常涉及前端路由控制、按钮级权限和接口权限。以下是几种常见的实现方法：
基于路由的动态权限控制
通过用户角色动态生成可访问的路由表，使用 vue-router 的 addRoutes 方法动态挂载路由。
// 在路由守卫中检查权限
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
if (hasToken) {
if (to.path === '/login') {
next('/')
} else {
const roles = store.getters.roles
// 根据roles生成可访问的路由表
const accessRoutes = asyncRoutes.filter(route => {
return roles.some(role => route.meta.roles.includes(role))
})
router.addRoutes(accessRoutes)
next({ ...to, replace: true })
}
} else {
next('/login')
}
})按钮级权限控制
创建自定义指令 v-permission，用于控制按钮的显示与隐藏。
// 全局注册指令
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 => {
return value.includes(role)
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}
})
// 使用方式
<button v-permission="['admin']">删除</button>接口权限控制
在请求拦截器中添加权限验证逻辑，确保用户只能访问有权限的API。
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 403) {
// 处理无权限情况
Message.error('无权限访问')
router.push('/403')
}
return Promise.reject(error)
})权限数据存储
使用 Vuex 存储用户权限信息，方便全局访问。
const store = new Vuex.Store({
state: {
roles: []
},
mutations: {
SET_ROLES(state, roles) {
state.roles = roles
}
},
actions: {
getInfo({ commit }) {
return new Promise((resolve, reject) => {
getInfo().then(response => {
const { roles } = response.data
commit('SET_ROLES', roles)
resolve(roles)
}).catch(error => {
reject(error)
})
})
}
}
})权限验证工具函数
创建公共方法用于权限验证，提高代码复用性。
export function checkPermission(permissionRoles) {
const roles = store.getters.roles
if (permissionRoles && permissionRoles instanceof Array && permissionRoles.length > 0) {
return roles.some(role => permissionRoles.includes(role))
} else {
return false
}
}错误页面处理
为无权限访问的情况创建专门的错误页面，提升用户体验。
// 路由配置
{
path: '/403',
component: () => import('@/views/error-page/403'),
hidden: true
}通过以上方法可以实现 Vue 项目的权限分离，确保不同角色的用户只能访问其权限范围内的功能和数据。
