vue权限控制如何实现
Vue权限控制实现方法
基于路由的权限控制
通过路由守卫拦截未授权访问，结合用户角色动态生成可访问路由表。在router.beforeEach中校验用户权限，使用addRoutes动态挂载权限路由。
// 路由配置示例
const routes = [
{ path: '/admin', component: Admin, meta: { requiresAuth: true, roles: ['admin'] } }
]
// 路由守卫
router.beforeEach((to, from, next) => {
const hasToken = getToken()
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!hasToken) {
next('/login')
} else if (!checkUserRole(to.meta.roles)) {
next('/403')
} else {
next()
}
} else {
next()
}
})组件级权限控制
使用自定义指令v-permission控制组件显示，或在组件内通过方法判断权限状态。
// 注册全局指令
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters.roles
if (value && !roles.some(role => value.includes(role))) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})
// 模板中使用
<button v-permission="['admin']">管理员按钮</button>API请求权限控制 在axios拦截器中添加权限验证，对无权限的请求进行拦截或重定向。
// 请求拦截器
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken()
}
return config
},
error => Promise.reject(error)
)权限数据管理 使用Vuex集中管理权限状态，包含用户角色、权限列表等数据，提供权限验证方法。
// Vuex store示例
const store = new Vuex.Store({
state: {
roles: [],
permissions: []
},
getters: {
hasPermission: state => permission => {
return state.permissions.includes(permission)
}
}
})按钮级权限控制 结合计算属性或方法实现按钮显示控制，适用于细粒度权限场景。
// 组件内方法
methods: {
checkPermission(permission) {
return this.$store.getters.permissions.includes(permission)
}
}
// 模板中使用
<button v-if="checkPermission('user:delete')">删除</button>动态菜单生成 根据权限数据递归生成导航菜单，只显示有权限访问的菜单项。
// 过滤有权限的菜单
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
}
})
}
