vue 实现权限管理
Vue 权限管理实现方案
权限管理通常分为路由权限和功能权限两部分，以下是具体实现方式：
路由权限控制
动态路由方案
- 用户登录后获取权限列表，过滤出有权限的路由
- 使用
router.addRoutes动态添加路由
// 过滤异步路由
function filterAsyncRoutes(routes, roles) {
return routes.filter(route => {
if (hasPermission(roles, route)) {
if (route.children) {
route.children = filterAsyncRoutes(route.children, roles)
}
return true
}
return false
})
}路由守卫控制 在全局前置守卫中检查权限
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.getters.roles.includes(to.meta.role)) {
next('/403')
} else {
next()
}
})功能权限控制
自定义指令方式
创建v-permission指令控制元素显示
Vue.directive('permission', {
inserted(el, binding) {
if (!store.getters.roles.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})组件方式 封装权限检查组件
<template>
<div v-if="checkPermission">
<slot></slot>
</div>
</template>
<script>
export default {
props: ['value'],
computed: {
checkPermission() {
return this.$store.getters.roles.includes(this.value)
}
}
}
</script>权限数据管理
使用Vuex存储权限信息
const store = new Vuex.Store({
state: {
roles: []
},
mutations: {
SET_ROLES(state, roles) {
state.roles = roles
}
},
actions: {
fetchRoles({ commit }) {
return getRoles().then(response => {
commit('SET_ROLES', response.data)
})
}
}
})按钮级权限控制
方法封装 创建全局方法检查权限
Vue.prototype.$_has = function(permission) {
return this.$store.getters.roles.includes(permission)
}
// 使用方式
v-if="$this.$_has('admin')"权限枚举 定义权限常量避免硬编码
export const PERMISSIONS = {
USER_ADD: 'user:add',
USER_EDIT: 'user:edit',
USER_DELETE: 'user:delete'
}最佳实践建议
- 后端返回权限树结构，前端做映射转换
- 权限变更时刷新页面或重新获取权限数据
- 404页面要做权限过滤处理
- 生产环境建议配合后端进行接口级权限校验
- 敏感操作需要二次权限确认
实现时可根据项目复杂度选择适合的方案，小型项目可采用简单的前端控制方案，中大型项目建议前后端配合完成完整的权限系统。
