vue权限怎么实现
Vue权限实现方案
路由权限控制
通过vue-router的全局守卫和动态路由实现权限过滤。在路由配置中标记权限标识，结合用户角色动态生成可访问路由表。
// 路由配置示例
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true, roles: ['admin'] }
}
]
// 路由守卫
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!hasToken) {
next('/login')
} else {
if (!checkUserRole(to.meta.roles)) {
next('/403')
}
}
}
next()
})组件级权限控制
使用自定义指令v-permission控制组件显示，适用于按钮等细粒度权限控制。
// 注册指令
Vue.directive('permission', {
inserted: function(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode.removeChild(el)
}
}
})
// 模板中使用
<button v-permission="'user:create'">创建用户</button>API请求拦截
在axios拦截器中验证权限，无权限的请求自动拦截并提示。
axios.interceptors.request.use(config => {
if (!checkApiPermission(config.url)) {
return Promise.reject(new Error('无访问权限'))
}
return config
})权限数据管理
建议使用Vuex集中管理权限数据，保持状态同步。
const store = new Vuex.Store({
state: {
roles: [],
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
}
})动态菜单渲染
根据权限数据动态生成导航菜单，通过递归组件实现多级菜单渲染。
<template>
<el-menu>
<menu-item
v-for="item in filteredMenu"
:key="item.path"
:item="item"
/>
</el-menu>
</template>
computed: {
filteredMenu() {
return this.menu.filter(item =>
!item.meta?.roles ||
checkUserRole(item.meta.roles)
)
}
}权限指令扩展
可以扩展更多权限指令，如v-role用于角色验证。
Vue.directive('role', {
bind: function(el, binding) {
if (!hasRole(binding.value)) {
el.style.display = 'none'
}
}
})错误页面处理
配置403等权限相关错误页面，提升用户体验。
{
path: '/403',
component: () => import('@/views/error/403.vue')
}以上方案可根据实际项目需求组合使用，建议前后端配合完成完整的权限验证体系，前端控制展示层权限，后端校验数据层权限。
