当前位置: 首页 > news >正文

前端权限管理

前端权限

本质上就是控制前端视图层的展示和前端所发送的请求

一、RBAC

  1. 用户(User):系统的使用者

  2. 角色(Role):权限的集合(如管理员、普通用户)。

  3. 权限(Permission):具体操作的最小单元(如 user:add、order:delete)。

  4. 角色-权限映射:角色与权限的关联关系(如管理员拥有 user:add 和 user:delete)。

二、动态路由的核心思想

  • 静态路由:在项目初始化时定义所有路由。

  • 动态路由:在运行时根据用户权限或其他条件动态生成路由。

1.动态路由的实现流程:

  • 用户登录后,获取用户的权限信息。

  • 根据权限信息,筛选出用户有权限访问的路由。

  • 使用 router.addRoute(Vue Router 4)或 router.addRoutes(Vue Router 3)动态添加路由。

  • 在路由跳转时,通过路由守卫校验用户权限。

2.动态路由的优势

  • 灵活性:根据用户权限动态生成路由,适应不同角色的需求。

  • 安全性:通过路由守卫和动态路由,确保用户只能访问有权限的页面。

  • 可维护性:将权限控制和路由管理分离,便于扩展和维护。

3.总结

  • 动态路由 是实现权限控制的核心技术之一。

  • 通过动态生成路由和路由守卫校验,可以实现灵活的权限控制。

  • 动态路由的实现步骤包括:定义路由、获取权限、筛选路由、动态添加路由、校验权限。

三、前端权限管理实现

  • 关键原则:前端权限控制只是辅助,所有敏感操作必须由后端严格鉴权。

  • 实现步骤:

    1. 用户修改本地权限数据后,可以绕过前端路由跳转,进入本不该访问的页面。

    2. 但该页面初始化时,会自动调用后端接口(如获取列表数据)。

    3. 后端对每个接口进行权限校验,发现无权限时返回 403 错误码。

    4. 前端拦截 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)}
})
http://www.xdnf.cn/news/184357.html

相关文章:

  • 小刚说C语言刷题——1320时钟旋转
  • 生成式人工智能认证(GAI认证)要学哪些知识?
  • google chrome 中 fcitx5 候选框不跟随光标
  • 【SpringCloudAlibaba】Dubbo 和 Spring Cloud OpenFeign 在服务治理能力上的差异
  • 生成式人工智能认证(GAI认证)考试难吗?
  • SpringBoot的自动扫描特性-笔记
  • Vue初步总结-摘自 黑马程序员
  • 浅谈 MySQL 日志的原理
  • 新增 29 个专业,科技成为关键赛道!
  • 互联网的下一代脉搏:深入理解 QUIC 协议
  • Day23-Web开发——Linux
  • 基于深度学习的图像压缩技术(二)
  • AI时代下如何实现财务自由?
  • 江达、安托、凯思软件这几家达索代理商,哪家好?
  • 算法备案批量咨询问题解答第二期
  • NdrpPointerUnmarshallInternal函数分析之pFormatPointee指针的确定
  • deepspeed 滴 ZERO 介绍
  • Python中的win32包介绍
  • MIME 类型是个什么东西?
  • JavaScript 解构赋值(下):对象解构与高级应用
  • 复盘笔记1
  • 一周学会Pandas2 Python数据处理与分析-Pandas2统计计算操作
  • Redis Desktop Manager 安装教程Windows
  • 织梦dedecms调用会员详细字段信息
  • PostSwigger 的 CSRF 漏洞总结
  • 进程控制的学习
  • 单个接口承接id+状态变化的一种思路记录
  • 【TUST“码蹄杯”编程之星】4.27 每日一题
  • 代码随想录第29天:动态规划2
  • Android ViewModel原理简要