vue权限实现
vue权限实现方案
在Vue项目中实现权限控制通常涉及路由权限、按钮权限和API权限三个方面。以下是常见的实现方法：
路由权限控制
基于用户角色动态生成可访问路由表，使用vue-router的导航守卫进行拦截：
// 在router.beforeEach中校验权限
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
if (to.meta.requiresAuth && !hasToken) {
next('/login')
} else {
next()
}
})动态添加路由方案：
// 根据用户权限过滤异步路由
const 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实现按钮显隐控制：
// 注册全局指令
Vue.directive('permission', {
inserted(el, binding) {
const { value } = binding
const permissions = store.getters.permissions
if (value && !permissions.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})使用方式：
<button v-permission="'user:add'">添加用户</button>权限数据管理
建议使用Vuex集中管理权限数据：
// store/modules/permission.js
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}后端配合方案
前端应获取后端返回的权限结构数据：
{
"roles": ["admin"],
"permissions": ["user:add", "user:edit"]
}建议采用JWT进行接口权限验证，在axios拦截器中添加token：
service.interceptors.request.use(config => {
config.headers['Authorization'] = getToken()
return config
})权限指令扩展
对于更复杂的权限判断，可以扩展权限指令：
Vue.directive('permission', {
bind(el, binding) {
const permission = binding.value
const hasPermission = checkPermission(permission)
if (!hasPermission) {
el.style.display = 'none'
}
}
})动态菜单实现
根据权限数据生成侧边栏菜单：
computed: {
routes() {
return this.$router.options.routes.filter(route => {
return hasPermission(this.roles, route)
})
}
}以上方案可根据实际项目需求进行组合或调整，建议将权限逻辑封装成独立模块便于维护。
