1 前端权限控制【权限】✓
前端权限控制一般分为菜单权限控制、路由权限控制、按钮权限控制
-
菜单权限控制
- 我前公司那个数据中台的菜单权限设计是这样的。后端传给前端的菜单数据是由前端来控制的,前端在菜单管理中确定菜单名称以及菜单路径,给后端进行数据持久化。用户在登录成功之后,后端就会返回所有的菜单数据和该用户的权限数据。使用map动态渲染后端返回的菜单数据,并在遍历的时候判断该用户的权限数据中是否存在这项菜单。如果存在则渲染这项菜单,并采用递归遍历菜单数据层级。所以这样处理就可以控制不同用户进来能够显示不同的菜单。当点击了某个菜单项就可以通过编程式导航history.push跳转路径。
-
路由权限控制
- 这个项目我们是采用umi搭建的系统,支持约定式路由,需要在config的routes配置项下配置路由的映射关系。当用户通过侧边栏点击某个菜单项导致url路径发生改变的时候,umi会根据routes配置项来进行路由匹配,展示不同组件。但是为了路由权限控制,我们改用动态路由匹配。其实和菜单的动态渲染逻辑差不多。就是使用map遍历后端返回的菜单数据,并在遍历的时候判断该用户的权限数据中是否存在这项菜单。如果存在就通过进行路由匹配。这样就可以防止用户通过url直接输入路径来访问他没有权限的页面了。
-
按钮权限控制
- 我前公司这个数据中台项目是没有做按钮级别的权限控制的。但是,如果要做的话,其实我也有一些处理的思路。首先将控制按钮显示隐藏的功能抽出封装为一个函数,并传入按钮类型,然后在函数内部根据用户按钮权限判断是否拥有传入的按钮类型来确定函数返回true还是false。那么就可以在Button组件中根据disabled属性绑定这个函数来确定按钮是否显示。umi项目的话一般是使用umi提供的Access组件来实现按钮级别的权限。
后端返回的权限列表 & 前端本地映射表 & 登录账号的权限表
【知识背景】
菜单权限控制:就是根据该用户拥有不同的角色来显示不同的左侧菜单
路由权限控制:尽管这个用户左侧没有这个菜单点击,为了防止用户在地址栏直接输入路径去访问不属于它的路由组件
按钮权限控制:根据不同的用户角色对某个按钮控制是否显示
2 刷新怎么保持当前菜单【权限】✓
antd中的 Menu 组件中的选中的配置属性置为当前路径,当前路径根据路由获取
3 禁用某个菜单怎么同步更新左侧菜单栏【权限】✓
权限操作后左侧菜单栏同步更新我觉得,我觉得应该把左侧菜单和权限列表使用同一数据源,并且把数据源放置在store中