vue实现权限管理页面
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 && !userRoles) {
next('/login')
} else if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
next('/403')
} else {
next()
}
})组件级权限控制
创建自定义指令 v-permission，用于控制组件级别的显示权限。
Vue.directive('permission', {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters.permissions
if (value && !permissions.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})使用方式：
<button v-permission="'user:delete'">删除用户</button>动态菜单生成
根据用户权限动态生成侧边栏菜单，从后端获取权限数据后过滤可访问的路由。
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
}
})
}API 请求拦截
在 axios 拦截器中添加权限验证，拦截未授权的请求。
axios.interceptors.request.use(config => {
const token = store.getters.token
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})权限数据存储
使用 Vuex 集中管理权限状态，包括用户角色、权限列表等信息。
const store = new Vuex.Store({
state: {
roles: [],
permissions: []
},
mutations: {
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
}
}
})按钮级权限控制
通过混入 (mixin) 或工具函数实现按钮级别的权限判断。
export function checkPermission(permission) {
const permissions = store.getters.permissions
return permissions.includes(permission)
}使用方式：
<template>
<button v-if="hasPermission('user:create')">创建用户</button>
</template>
<script>
import { checkPermission } from '@/utils/permission'
export default {
methods: {
hasPermission(perm) {
return checkPermission(perm)
}
}
}
</script>错误页面处理
为不同权限错误情况配置相应的错误页面，如 403（禁止访问）、401（未授权）等。
const routes = [
{
path: '/403',
component: () => import('@/views/error-page/403')
}
]最佳实践建议
- 前后端权限校验要双重保障，前端控制展示，后端校验请求
- 权限数据应加密存储，避免被篡改
- 定期清理无效权限缓存
- 复杂的权限系统可以考虑使用 RBAC (基于角色的访问控制) 模型
- 权限变更后需要及时更新前端存储的状态
通过以上方法组合使用，可以构建完整的 Vue 权限管理系统，实现从路由到按钮的多粒度权限控制。根据项目实际需求，可以灵活调整实现方案。
