vue的权限控制实现
路由级权限控制
路由级权限控制通常通过Vue Router的导航守卫实现。在路由配置中为每个路由添加meta字段定义所需权限：
const routes = [
{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, roles: ['admin'] }
}
]在全局前置守卫中校验权限：
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else if (to.meta.roles && !hasPermission(userRoles, to.meta.roles)) {
next('/403')
} 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>按钮级权限控制
创建权限校验函数并混入到Vue实例：
Vue.mixin({
methods: {
$hasPermission(requiredRoles) {
const userRoles = this.$store.getters.roles
return requiredRoles.some(role => userRoles.includes(role))
}
}
})模板中使用：
<button v-if="$hasPermission(['admin'])">管理</button>动态菜单权限
根据用户权限动态生成可访问路由：
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
}
return true
})
}权限数据管理
使用Vuex集中管理权限状态：
const store = new Vuex.Store({
state: {
roles: []
},
mutations: {
SET_ROLES(state, roles) {
state.roles = roles
}
},
actions: {
async fetchRoles({ commit }) {
const roles = await api.getRoles()
commit('SET_ROLES', roles)
}
}
})服务端校验
前端实现需配合服务端校验：
axios.interceptors.response.use(response => {
return response
}, error => {
if (error.response.status === 403) {
router.push('/403')
}
return Promise.reject(error)
})权限指令扩展
支持权限模式配置的增强指令：
Vue.directive('permission', {
inserted(el, binding) {
const { value, modifiers } = binding
const hasAuth = checkPermission(value)
if (!hasAuth) {
if (modifiers.disable) {
el.disabled = true
} else {
el.parentNode?.removeChild(el)
}
}
}
})使用方式：
<button v-permission.disable="'create'">创建</button>
