前端权限管理
前端权限
本质上就是控制前端视图层的展示和前端所发送的请求
一、RBAC
-
用户(User):系统的使用者
-
角色(Role):权限的集合(如管理员、普通用户)。
-
权限(Permission):具体操作的最小单元(如 user:add、order:delete)。
-
角色-权限映射:角色与权限的关联关系(如管理员拥有 user:add 和 user:delete)。
二、动态路由的核心思想
-
静态路由:在项目初始化时定义所有路由。
-
动态路由:在运行时根据用户权限或其他条件动态生成路由。
1.动态路由的实现流程:
-
用户登录后,获取用户的权限信息。
-
根据权限信息,筛选出用户有权限访问的路由。
-
使用 router.addRoute(Vue Router 4)或 router.addRoutes(Vue Router 3)动态添加路由。
-
在路由跳转时,通过路由守卫校验用户权限。
2.动态路由的优势
-
灵活性:根据用户权限动态生成路由,适应不同角色的需求。
-
安全性:通过路由守卫和动态路由,确保用户只能访问有权限的页面。
-
可维护性:将权限控制和路由管理分离,便于扩展和维护。
3.总结
-
动态路由 是实现权限控制的核心技术之一。
-
通过动态生成路由和路由守卫校验,可以实现灵活的权限控制。
-
动态路由的实现步骤包括:定义路由、获取权限、筛选路由、动态添加路由、校验权限。
三、前端权限管理实现
-
关键原则:前端权限控制只是辅助,所有敏感操作必须由后端严格鉴权。
-
实现步骤:
-
用户修改本地权限数据后,可以绕过前端路由跳转,进入本不该访问的页面。
-
但该页面初始化时,会自动调用后端接口(如获取列表数据)。
-
后端对每个接口进行权限校验,发现无权限时返回 403 错误码。
-
前端拦截 403 错误,强制跳转到无权限提示页或登录页。
-
四、总结
-
核心流程:用户登录 → 获取权限 → 动态生成路由 → 控制 UI 元素。
-
安全原则:前端控制用户体验,后端兜底校验。
-
优化方向:减少请求次数、按需加载权限、Token 短期有效。
控制方案
1.路由控制
js
// 路由守卫示例(Vue)
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !store.getters.roles) {next('/login')} else if (hasPermission(store.getters.roles, to.meta.permissions)) {next()} else {next('/403') // 无权限页面}
})
动态路由添加:通过router.addRoutes()加载过滤后的路由表
2.菜单控制
vue
<!-- 动态菜单组件 -->
<template><el-menu><template v-for="item in filteredMenu"><sub-menu :item="item" :key="item.path"/></template></el-menu>
</template><script>
// 根据权限过滤菜单
computed: {filteredMenu() {return this.allMenu.filter(menu => this.permissions.includes(menu.meta.permission))}
}
</script>
3.按钮控制
js
// 自定义指令 v-permission(Vue)
Vue.directive('permission', {inserted: (el, binding) => {const { value } = bindingconst hasPerm = store.getters.permissions.includes(value)if (!hasPerm) el.parentNode.removeChild(el)}
})