权限管理vue如何实现
基于路由的权限控制
在Vue中可以通过路由守卫实现页面级权限控制。定义路由时添加meta字段标记权限角色：
const routes = [
{
path: '/admin',
component: AdminPage,
meta: { requiresAuth: true, roles: ['admin'] }
}
]全局前置守卫校验权限：
router.beforeEach((to, from, next) => {
const userRoles = store.getters.roles
if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/forbidden')
} else {
next()
}
})组件级权限控制
使用自定义指令v-permission控制元素显示：
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters.permissions
if (!permissions.includes(value)) {
el.parentNode.removeChild(el)
}
}
})模板中使用方式：
<button v-permission="'user:delete'">删除用户</button>动态菜单生成
根据权限数据过滤导航菜单：
computed: {
filteredRoutes() {
return this.allRoutes.filter(route => {
return !route.meta?.roles || route.meta.roles.includes(this.userRole)
})
}
}API权限拦截
在axios拦截器中添加权限校验：
axios.interceptors.request.use(config => {
const requiredPermission = config.meta?.permission
if (requiredPermission && !hasPermission(requiredPermission)) {
return Promise.reject(new Error('无访问权限'))
}
return config
})权限数据管理
使用Vuex集中管理权限状态：
const store = new Vuex.Store({
state: {
permissions: []
},
mutations: {
SET_PERMISSIONS(state, perms) {
state.permissions = perms
}
},
actions: {
async fetchPermissions({ commit }) {
const res = await getPermissionsAPI()
commit('SET_PERMISSIONS', res.data)
}
}
})按钮级权限组件
创建权限包裹组件：
<template>
<slot v-if="hasPermission"></slot>
</template>
<script>
export default {
props: ['permission'],
computed: {
hasPermission() {
return this.$store.getters.permissions.includes(this.permission)
}
}
}
</script>使用方式：
<permission-wrap permission="user:edit">
<button>编辑</button>
</permission-wrap>
