vue 实现权限
Vue 实现权限控制的方法
在 Vue 项目中实现权限控制通常涉及前端路由、组件和按钮级别的权限管理。以下是几种常见的实现方式：
路由权限控制
通过路由守卫实现权限验证，过滤用户无权访问的路由：
// router.js
const router = new VueRouter({...})
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles // 从Vuex获取用户角色
const requiredRoles = to.meta.roles // 路由需要的角色
if (requiredRoles && !requiredRoles.some(role => userRoles.includes(role))) {
next('/forbidden') // 无权限跳转
} else {
next()
}
})动态路由生成
根据用户权限动态生成可访问的路由表：
// 过滤异步路由表
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
}
})
}
// 添加动态路由
store.dispatch('GenerateRoutes', roles).then(accessRoutes => {
router.addRoutes(accessRoutes)
})组件级权限控制
使用自定义指令实现组件级别的权限控制：
// main.js
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const roles = store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const hasPermission = roles.some(role => value.includes(role))
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error('需要指定权限数组')
}
}
})
// 使用方式
<template>
<button v-permission="['admin']">管理员按钮</button>
</template>按钮级权限控制
通过方法或计算属性控制按钮显示：
// 方法实现
methods: {
checkPermission(permission) {
return this.$store.getters.permissions.includes(permission)
}
}
// 计算属性实现
computed: {
hasEditPermission() {
return this.$store.getters.permissions.includes('edit')
}
}
// 模板中使用
<button v-if="hasEditPermission">编辑</button>权限数据管理
通常使用 Vuex 存储权限相关数据：
// store/modules/permission.js
const state = {
roles: [],
permissions: []
}
const mutations = {
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
}
const actions = {
getInfo({ commit }) {
return new Promise((resolve, reject) => {
getInfo().then(response => {
const { roles, permissions } = response.data
commit('SET_ROLES', roles)
commit('SET_PERMISSIONS', permissions)
resolve(response)
}).catch(error => {
reject(error)
})
})
}
}最佳实践建议
- 前后端权限校验配合使用，前端控制展示，后端校验请求
- 敏感操作必须通过后端再次验证权限
- 权限数据应加密存储在本地，避免伪造
- 实现统一的权限异常处理机制
- 考虑使用权限码而非角色进行更细粒度控制
以上方法可以根据项目需求组合使用，实现从路由到按钮的多层次权限控制体系。
