前端权限管理
前端权限
本质上就是控制前端视图层的展示和前端所发送的请求
一、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)}
})