权限管理(React)
发布网友
发布时间：2022-09-04 09:02
共1个回答
热心网友
时间：2024-11-08 21:29
公司需要做一款产品，里面需要有一个平台用来类似手机APP似的房子不同的子产品入口（类快捷图标），各子产品间实现单点登录，创建不同账户级别，可以分配产品权限，产品资源权限，产品操作级权限。
本产品，最后权限做了双重控制，前后端都控制， 本文只从前端角度进行总结。
账户所拥有的产品权限信息，登录后后台将会返回数组形式，每项包含一些信息，至于这些产品信息管理，也在后台系统中进行统一管理配置，之后将会在资源权限提及。
其中，主要是url来进行跳转，这里有个问题：url里的路径有时是同一域名下的产品，也可以是一些以前的产品路径，这就需要进行url判断
当然，有人会问，如果直接进入一个产品地址，如何判断登录呢？
我们前后端约定好一个未登录code码 401
其实前端也将登录后的用户信息存入了localstorage, 退出登录后将会销毁，这也能进行登录验证，但是不是很准确；当然这里其实还得进行路由权限验证，这下面将会讲到。
路由权限设计有些考虑的问题：
后台系统资源管理设计
资源管理采用树形结构，同级叶子可以进行拖拽调换位置展示导航菜单，每级叶子均可以添加叶子，删除修改。叶子的信息这里有些特有的设计：
登录后，对显示菜单进行渲染后，要对访问的路由进行访问权限审核检查：
操作权限管理界面
操作权限主要是设计了一个webkey配置，方便前端的操作权限的检测。操作权限是进行统一管理的，路径资源管理下可以进行操作权限的勾选配置。
操作权限由于涉及到按钮级，也就是组件级，不能在每个页面单独配置，那样需求改动，将会陷入深坑。我采用的 HOC 高阶组件的封装套路：
界面中使用也是很简单：
这样采用HOC进行封装，可以进行一些别的需要扩展：加入操作动画，改变样式等。
不同的用户登录以后，对数据范围的权限是有*的，那些能够访问，那些不能访问在产品设计的是就已经定义好，当访问一个当前登录用户无权访问的 API 或者数据的时候，API 响应中会返回对应的 code, 这个 code 是提前就前后的约定好的值。
这部分权限需要在 xhr api 层调用接口时进行数据权限的判断
总结一下，其实前端在做权限控制的时候，依赖于后端 API 返回的配置信息，所以在权限设计，路由设计，数据结构设计的时候，前后端一定要约定好。
