权限角色菜单（前端）

最新推荐文章于 2024-05-23 18:21:10 发布
最新推荐文章于 2024-05-23 18:21:10 发布
阅读量1k 收藏 19
点赞数 10
分类专栏： 智慧物联管理平台 文章标签： 前端 状态模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69146489/article/details/138654211
版权

一、后端对接部分

通过前端固定文件中记录的菜单树形结构进行显示或者隐藏侧边栏菜单控制角色菜单权限

  由于本框架有不同的模块，因此无法统一用最简单的文件传输形式传给后端存储，所以由以下方式多选出来的结果集传给后端保存，前端通过后端保存的结果集判断是否包含此权限

上述结构最终会形成如下数组结构,分为不同模块，每个模块都有自己的回显多选菜单，数据权限的选中结果和菜单选中结果

[
    {
        "label": "系统模块",
        "value": "baseHome",
        "selectedKeys": [],
        "checkedKeys": [
            "baseHome_index"
        ],
        "requestChecked": [
            "/数据1",
            "/数据2"
        ],
        "requestList": [
            {
                "labelName": "工作台",
                "keyName": "baseHome_index",
                "requestList": [
                    {
                        "label": "数据1",
                        "value": "/数据1"
                    },
                    {
                        "label": "数据2",
                        "value": "/数据2"
                    }
                ]
            }
        ]
    },
    {
        "label": "安防模块",
        "value": "security",
        "selectedKeys": [],
        "checkedKeys": [
            "security_comprehensive",
            "security_personList",
            "security_carList"
        ],
        "requestChecked": [
            "/mange",
            "/req",
            "/mange",
            "/req",
            "/mange",
            "/req",
            "/mange",
            "/req"
        ],
        "requestList": [
            {
                "labelName": "人员信息列表",
                "keyName": "security_personList",
                "requestList": [
                    {
                        "label": "借口1",
                        "value": "/mange"
                    },
                    {
                        "label": "借口2",
                        "value": "/req"
                    }
                ]
            },
            {
                "labelName": "人员信息列表",
                "keyName": "security_personList",
                "requestList": [
                    {
                        "label": "借口1",
                        "value": "/mange"
                    },
                    {
                        "label": "借口2",
                        "value": "/req"
                    }
                ]
            },
            {
                "labelName": "车辆信息列表",
                "keyName": "security_carList",
                "requestList": [
                    {
                        "label": "借口1",
                        "value": "/mange"
                    },
                    {
                        "label": "借口2",
                        "value": "/req"
                    }
                ]
            },
            {
                "labelName": "车辆信息列表",
                "keyName": "security_carList",
                "requestList": [
                    {
                        "label": "借口1",
                        "value": "/mange"
                    },
                    {
                        "label": "借口2",
                        "value": "/req"
                    }
                ]
            }
        ]
    },
    {
        "label": "安全教育",
        "value": "education",
        "selectedKeys": [],
        "checkedKeys": [
            "education_index"
        ],
        "requestChecked": [
            "/安全教育数据1"
        ],
        "requestList": [
            {
                "labelName": "安全教育工作台",
                "keyName": "education_index",
                "requestList": [
                    {
                        "label": "安全教育数据1",
                        "value": "/安全教育数据1"
                    }
                ]
            }
        ]
    }
]

前端发送该格式的json字符串给后端，后端需要保存字符串格式方便编辑回显，同时需要把里面的checkedKeys组合成一个新的数组，requestChecked组合成一个新的数组，在前台登录之后获取该用户的权限只需要这两个数组结果，前端通过比对是否包含这个数组中的值控制权限显示，例如

authRouter: ["baseHome_securityDevice", "baseHome_index", "baseHome_personList", "baseHome_roleList", "baseHome_logList", "baseHome_moduleList"],
authPath: ["/","/req","/req/add","/req/getList"],

每个不同的模块对应后端不同的包，由模块控制管理

模块以及模块对应的路由都在前端文件写死，只控制他的状态，通过checked控制此模块是否开启，如果后端没有部署该模块的接口包，则永远为关闭状态，只有开启的模块才可以进行上述角色中对该模块进行菜单管理

{ label: "系统模块", value: "baseHome", description: "这是系统模块", checked: true, children: 路由文件 },
{ label: "安防模块", value: "security", description: "这是安防模块", checked: true, children: 路由文件 },
{ label: "安全教育", value: "education", description: "这是安全教育", checked: true, children:路由文件 },

二、前端代码处理

前端权限通过比对后端存的值来切割现在展示的侧边栏

//通过请求路由菜单接口获取权限路由，把不存在的路由置灰
      const routerStore = useRouterStore()
      this.siderRouter.forEach((item, index) => {
        item.disabled = true;
        if (item.hasOwnProperty("children") && item.children.length != 0) {
          item.children.forEach((itemChild, indexChild) => {
            if (routerStore.authRouter.indexOf(itemChild.key) != -1) {
              itemChild.disabled = false;
              item.disabled = false;
            } else {
              itemChild.disabled = true;
            }
            // 管理员的判断不置灰权限
            if(useStore().userInfo.userId == '-1'){
              itemChild.disabled = false;
              item.disabled = false;
            }
          });
        } else {
          if (routerStore.authRouter.indexOf(item.key) != -1) {
            item.disabled = false;
          } else {
            item.disabled = true;
          }
        }

        // 管理员的判断不置灰权限
        if(useStore().userInfo.userId == '-1'){
          item.disabled = false;
        }
      });

本地文件通过更改disable标出哪些是没有权限的节点不删减源文件，在父框架中调用时先赋值再判断如果disable为true则切割不展示

//处理切割菜单
      this.sideRouter.forEach((item, index) => {
        if (item.hasOwnProperty("children") && item.children.length != 0) {
          item.children.forEach((itemChild, indexChild) => {
            if (itemChild.disabled) {
              item.children.splice(itemChild);
            }
          });
        } else if (item.disabled) {
          this.sideRouter.splice(item);
        }
      });
前端pinia路由权限文件解读

label

中文名

key

对应router的name，antd侧边栏默认自动读取这个key用于点击跳转

disabled

权限中是否启用这个菜单，在处理方法中判断true的切割掉，最后把剩下的赋值给最外层的侧边栏，源文件部分不做切割只用disable做标识

parentPathName

父节点的router的name

childrenPathName

重要：侧边栏只分一级和二级，剩余的属于这个模块的路由如果不在这里归纳进数组，在头部模块栏切换时出现刷新或者后退前进操作将无法知道每个当前的路由的父级模块是谁侧边栏哪一个该选中，因此每个最低一级的侧边栏需要把他所属的页面router的name值放进这个数组，在父级路由守卫有重要作用，此做法避免了为了寻找某个路由的模块遍历所有的路由文件影响性能

moudel

这个侧边栏属于哪个模块，用于路由守卫方便判断不用遍历路由表提升性能

requestList

该层级包含哪些数据接口，和上面childrenPathName一样最底层一级需要把这个模块所有的接口全部写上，在权限判断是否能调用接口的axios全局拦截器里面有重要作用

children

如果有下一级则在children中展示，默认侧边栏只做两级，因为路由守卫和头部侧边公共组件还有axios全局拦截器有多次遍历操作，层级过高的树形结构影响性能

 

siderRouter: [
        {
          label: "工作台",
          key: "energy_index",
          icon: h(HomeOutlined),
          disabled: false,
          onlyAdmin: "0",
          parentPathName: "",
          number: 1,
          childrenPathName: [],
          moudel: "energy",
          requestList: [{ label: "能耗数据1", value: "/能耗数据1" }],
        },
        {
          label: "智能照明管理",
          key: "energy_lighting",
          icon: h(SoundOutlined),
          disabled: false,
          onlyAdmin: "0",
          parentPathName: "",
          number: 1,
          requestList: [],
          childrenPathName: [],
          moudel: "energy",
          children: [
            {
              label: "运行参数设置",
              key: "energy_parameter",
              disabled: false,
              onlyAdmin: "0",
              parentPathName: "energy_lighting",
              childrenPathName: [],
              moudel: "energy",
              requestList: [
                { label: "能耗数据2", value: "/能耗数据2" },
                { label: "能耗数据3", value: "/能耗数据3" },
              ],
              number: 1,
            },
            {
              label: "告警管理",
              key: "energy_alarmList",
              disabled: false,
              onlyAdmin: "0",
              parentPathName: "energy_lighting",
              childrenPathName: [],
              moudel: "energy",
              requestList: [
                { label: "能耗数据2", value: "/能耗数据2" },
                { label: "能耗数据3", value: "/能耗数据3" },
              ],
              number: 1,
            },
            {
              label: "电能耗TOP10",
              key: "energy_consumptionList",
              disabled: false,
              onlyAdmin: "0",
              parentPathName: "energy_lighting",
              childrenPathName: [],
              moudel: "energy",
              requestList: [
                { label: "能耗数据2", value: "/能耗数据2" },
                { label: "能耗数据3", value: "/能耗数据3" },
              ],
              number: 1,
            },
            {
              label: "数据监测",
              key: "energy_monitoringList",
              disabled: false,
              onlyAdmin: "0",
              parentPathName: "energy_lighting",
              childrenPathName: [],
              moudel: "energy",
              requestList: [
                { label: "能耗数据2", value: "/能耗数据2" },
                { label: "能耗数据3", value: "/能耗数据3" },
              ],
              number: 1,
            },
            {
              label: "计算关系管理",
              key: "energy_RelationshipList",
              disabled: false,
              onlyAdmin: "0",
              parentPathName: "energy_lighting",
              childrenPathName: [],
              moudel: "energy",
              requestList: [
                { label: "能耗数据2", value: "/能耗数据2" },
                { label: "能耗数据3", value: "/能耗数据3" },
              ],
              number: 1,
            },
            {
              label: "智能控制",
              key: "energy_controlList",
              disabled: false,
              onlyAdmin: "0",
              parentPathName: "energy_lighting",
              childrenPathName: [],
              moudel: "energy",
              requestList: [
                { label: "能耗数据2", value: "/能耗数据2" },
                { label: "能耗数据3", value: "/能耗数据3" },
              ],
              number: 1,
            },
          ],
        },
      ],

三、重构权限部分

总平台上传上面的文件，由列表管理部分可以对其进行删减增加，手动控制

租户平台通过租户号获取开通的模块拿到所有权限路由，再由管理员分配菜单和接口权限

最业余的程序猿
关注
  • 10
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
角色菜单权限控制
javaoney的博客
03-28 1563
用户、角色、菜单表对应的ER图，如下：其中，用户和角色是多对多的关系，角色与菜单也是多对多的关系，用户通过角色来关联到菜单 ，当然也有的业务系统菜单权限模型，是可以直接通过用户关联到菜单，对菜单权限可以直接控制到用户级别，不过这个都不是问题，这个也可以进行扩展。对于用户、角色表比较简单，下面，我们重点来看看菜单表的设计，如下：可以看到，整个菜单表就是一个树型结构，关键字段说明：menu_code：菜单编码，用于后端权限控制parent_id：菜单父节点ID，方便递归遍历菜单。
菜单-角色权限的操作
晴丶空
07-07 6636
在上一篇文章中讲解了菜单，角色，用户等管理信息的展示以及基本的查询等功能， 此片文章主要讲解菜单-角色权限管理的实现 首先在讲解菜单-角色权限之前，我们的创建一张表记录菜单和角色之间管理关系的表 menu_role，该表记录了角色id和菜单id外加操作时间和操作人信息等， 先看看界面原型： 在主界面上可以增加一列用来直观的展示角色-菜单的对应关系，该关系时通过他们的menu_role...
用户如何实现菜单权限控制
最新发布
weixin_42917779的博客
05-23 1095
1.数据库表设计 1.1菜单权限控制涉及到的表： 1.用户表：t_user(主要字段：user_id、user_name) 2.角色表：t_role(主要字段：role_id、role_name) 3.用户角色表：t_user_role(主要字段：user_id、role_id) #一对多 4.角色菜单表：t_role_menu（主要字段:role_id、menu_id）#一对多 #菜单id、菜单名称、菜单级别(一级、二级、三级)、菜单父类id、菜单url 5.菜单表:
权限管理的实现方法之菜单权限与角色权限
Jupite_ch的博客
07-30 7602
随着spring cloud项目越做越多，接触到很多以前没接触过的知识。 这次接触到的是权限管理方面的任务。 我涉及到的权限管理分为一下几种： 1、菜单权限 2、角色权限 3、接口权限 4、数据权限 无论是什么类型的权限，数据库的设计极为重要！！ 这次先分享一下菜单权限、角色权限的实现以及数据库的设计 首先是菜单的数据库设计： 字段名 类型 注释 menu_id int 菜单Id menu_name varchar 菜单名称 menu_key varchar 菜单标识 comp
角色菜单权限表关系及其建表语句.txt
12-05
角色菜单表关系及其建表sql。主要用于shiro权限认证。包含 1，sys_menu（菜单表） 2，sys_role_menu（角色菜单关联表） 3，sys_authorities （权限表） 4，sys_role_authorities（角色权限关联表） 5，sys_role（角色表）、sys_user（用户表）、sys_user_role（用户角色关联表）
vue项目中实现用户登录角色鉴权，不同的用户登录展示不同的菜单栏
weixin_51382988的博客
01-07 9721
vue项目中实现用户登录角色鉴权，不同的用户登录展示不同的菜单栏
小程序角色权限菜单.rar
07-21
"小程序角色权限菜单.rar"这个压缩包文件显然提供了这样的功能，允许开发者根据用户角色来设定不同的访问权限，从而实现更加精细化的控制。 首先，我们要理解“角色”和“权限”的概念。在系统设计中，“角色”通常...
好看的菜单权限分配
08-13
在IT行业中，菜单权限分配是系统管理中的一个重要环节，它涉及到用户角色的权限设定和界面交互的美观性。本文将详细解析"好看的菜单权限分配"这一主题，包括其设计原则、实现技术以及浏览器兼容性问题。 首先，...
前端权限控制与管理简单示例
11-17
这通常涉及从后端获取用户的角色信息，然后根据角色对应的权限筛选出用户可以访问的菜单项。例如，如果用户没有查看某个模块的权限，那么相应的菜单项应该在界面上隐藏。 3. **界面控制**：除了菜单，还需要根据...
菜单权限demo
05-13
菜单权限是指根据用户的角色或权限等级，控制他们能看到哪些菜单项、能执行哪些操作。这种机制可以防止未经授权的访问，保护系统的敏感信息，同时也能使界面简洁，只显示用户需要的功能。 在这个demo中，dtree...
菜单权限设计
07-28
4. **动态加载**：为了提高性能和用户体验，菜单可以实现动态加载，即根据用户的角色和权限，只显示他们有权限访问的菜单项。这样可以减少界面的复杂性，加快页面加载速度。 5. **权限继承与隔离**：在设计中，可以...
菜单、角色、权限的管理（新致）
flying0305的博客
11-25 2454
--在前台加菜单，需要用到的表 <textarea> select * from t98moduleinfo ; --菜单表 select * from t98role2module ;--权限、角色表(9999 是管理员权限) select * from t98user2role; --定义用户类型对应权限表 </textarea>
商家中心--菜单、操作员、角色、权限的关系
红豆和绿豆的博客
04-27 283
因此 一个操组员登录之后，获取所有的权限，然后根据菜单树做匹配过滤 最终获取一个完整的菜单树。用户关联多个操作员，且操作员可以跨pid。每一个权限对应一个菜单的权限。商户 可对应 多个门店。1个操作员关联多个门店。一个角色 有多个权限。
用户、角色、权限、菜单--数据库设计
热门推荐
m0_37845840的博客
09-10 1万+
菜单表--menu id--------------------主键 menu---------------菜单名称 permission_id-- 菜单权限 url-------------------路径 sort-----------------排序 style----------------样式（可设置css图标） parent_id----------父主键ID create_time...
【用户角色权限设计】
W664160450的博客
05-12 3448
用户角色权限设计结构： 用户表， 用户角色关联表， 角色表， 角色菜单关联表， 菜单表， 角色权限关联表， 权限表， 员工表， 员工角色关联表 这几张表涵盖了用户体系，角色体系，和权限体系以及菜单体系。 ...
Vue项目 针对角色配置权限之菜单权限
Julia_0502的博客
12-09 1871
Vue项目 针对角色配置权限之菜单权限
动态菜单/RBAC标准完整权限管理系统的实现,通用角色权限控制系统五张表逻辑关联设计实现
wh445306
11-15 7661
序言： 众所周知，权限系统是每个系统里面必备的最基本的系统，然而权限系统设计有时挺麻烦的，，现在整理了下，给正在开发此模块的朋友一个思路！ 　　设计基础：用户、角色、权限三大核心表，加上用户角色、角色权限两个映射表(用于给用户表关联上权限表)。这样就可以通过登录的用户来获取权限列表，或判断是否拥有某个权限。 　　大致用到５张表：用户表（s_user）、角色表（s_role）、菜单表（s_menu）、用户角色表（s_user_role）、角色菜单表（s_role_menu）<注：表前加前缀s代表这
用户-角色-权限设计【笔记】
packdge_black的博客
08-01 3512
简要介绍RBAC模型
给角色分配菜单
qq_45100361的博客
01-09 349
//=========================给角色分配菜单======================= @Override public void saveRolePermissionRealtionShipGuli(String roleId, String[] permissionIds) { //roleId角色id //permissionId菜单id 数组形式 //1 创建list集合，用于封装添加数据 .
前端react函数组件项目菜单路由权限如何
07-12
在React函数组件项目中实现菜单路由权限可以通过以下步骤： 1. 首先，定义一个菜单配置文件，该配置文件包含了所有的菜单项及其对应的路由信息。例如： ```javascript const menuConfig = [ { title: '首页', path: '/', roles: ['admin', 'user'], // 角色权限，只有admin和user角色可以访问 }, { title: '用户管理', path: '/users', roles: ['admin'], // 只有admin角色可以访问 }, // 其他菜单项... ]; ``` 2. 在你的路由组件中，根据用户的角色信息动态生成可访问的路由。你可以使用React Router来管理路由。例如： ```javascript import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; const App = () => { const userRole = getUserRole(); // 获取用户角色信息 const accessibleRoutes = menuConfig .filter(menu => menu.roles.includes(userRole)) // 过滤出用户角色可访问的菜单项 .map(menu => ( <Route key={menu.path} path={menu.path} component={menu.component} /> )); return ( <Router> {/* 其他路由配置 */} {accessibleRoutes} <Redirect to="/" /> {/* 默认跳转到首页 */} </Router> ); }; ``` 3. 在菜单组件中，根据用户角色信息动态生成可见的菜单项。你可以使用map方法遍历菜单配置文件，根据用户角色信息来判断是否显示菜单项。例如： ```javascript import { Link } from 'react-router-dom'; const Menu = () => { const userRole = getUserRole(); // 获取用户角色信息 const visibleMenus = menuConfig.filter(menu => menu.roles.includes(userRole) ); return ( <ul> {visibleMenus.map(menu => ( <li key={menu.path}> <Link to={menu.path}>{menu.title}</Link> </li> ))} </ul> ); }; ``` 通过以上步骤，你可以根据用户的角色信息动态生成可访问的路由和可见的菜单项，从而实现菜单路由权限控制。请根据你的项目需求进行相应的调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值