vue实现权限控制
路由权限控制
在Vue中通过路由守卫实现页面级权限控制，常用router.beforeEach全局守卫。定义路由时添加meta字段标记权限要求：
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
]在路由守卫中验证用户权限：
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!userRoles.some(role => to.meta.roles.includes(role))) {
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>动态菜单渲染
根据用户权限过滤导航菜单：
computed: {
filteredRoutes() {
return this.routes.filter(route => {
if (!route.meta || !route.meta.roles) return true
return route.meta.roles.some(role => this.userRoles.includes(role))
})
}
}API请求拦截
在axios拦截器中添加权限验证：
axios.interceptors.request.use(config => {
if (config.requiresAuth && !store.getters.token) {
return Promise.reject(new Error('需要认证'))
}
config.headers['X-Access-Token'] = getToken()
return config
})权限数据管理
建议使用Vuex集中管理权限状态：
const store = new Vuex.Store({
state: {
roles: [],
permissions: []
},
mutations: {
SET_PERMISSIONS(state, payload) {
state.permissions = payload
}
}
})服务端配合
前端应配合后端进行权限验证，后端接口应返回：
- 用户角色信息
- 权限点列表
- 401/403状态码处理未授权请求
典型权限数据结构示例：
{
"roles": ["editor"],
"permissions": ["article:edit", "user:view"]
}
