用户权限管理系统（后台权限管理）

参考：https://www.sohu.com/a/340431910_695183  或  https://blog.csdn.net/qq_38931949/article/details/93485519

前导：权限 设计 目的

　　1、有的系统（如，后台管理系统），各个角色的使用场景是部分通用，部分隔离的，这时候就需要引入“权限系统”了

一、控制系统的账号 及 登录

　　1、账号的 定义

　　　  基本上所有的互联网产品，无论是移动端、PC端、C端或B端产品，登录都需要一个账号。

　　　  只是对于C端的产品，都是用户自己注册即可。

　　　  而对于后台产品而言，是需要公司内部人员去创建账号的。而这个账号就是一把钥匙，

　　      我们通过控制账号所具备的权限，进而控制这个员工的所操作区域。

　　2、账号 的 层级：企业（管理员）账号、普通账号。【管理员账号，也叫超管。超管 可以 给 普通账号 授权，使其有管理的权限】

　　      公司的实际运营人，他应该掌握最核心、权限最大的企业帐号，所以也可以称为“管理员帐号”俗称admin账号，其他都为普通帐号。

二、用户与角色

　　1、用户 与 角色 关系 有：多对一 的 用户角色 关系、多对多的 用户 角色 关系。

                  

　　2、由于 公司 规模变大，角色 增多，试想如果用户量上万，新增一个角色时，可能需要为大量用户都分配一遍新的角色，工程量仍然巨大，

　　      此时即可以引入用户组的概念：如果部分用户的使用场景是相对一致和基础的，我们可以把这些用户打包成一个组，基于这个组的对象进行角色和权限的赋予。

三、前端如何实现权限控制       https://juejin.cn/post/7366515669351317519?searchId=202406031853083C8B0B1BD0521DBE75E0

前言：权限控制 除了 前端的控制，还有后端对数据的权限控制（数据的权限就是一个过滤筛选过程）。我们这里只讨论前端的权限控制。

实际开发中  基于 “用户 -> 角色 -> 权限”，是最常用的权限控制方案，就前端而言，主要如何实现的呢？

　　主要就两个部分

• • 页面权限受控
    注意：注意页面权限，不是菜单是否显示。没有权限的页面，在浏览器上直接输入url 地址也是打不开的。
  • 按钮权限受控

　　下面我们就来实现这两个部分

1、页面权限  https://blog.csdn.net/wujiayu31415/article/details/136718589

　　页面的访问，我们都是需要配置路由表的，根据配置路由表的路径来访问页面。那么，我们控制了路由表，不就能控制页面的访问了吗？

　　补充说明：菜单是基于路由的按钮，对应的路由没有，菜单自然也是没有的。所以页面权限不用考虑菜单，菜单只是控制显隐（）。

　  实现思路

• 前端根据不同用户信息，从后端获取该用户所拥有权限的路由表。
  （如果后端没有给路由表，前端自己创建动态路由表也是可以的）
• 前端动态创建路由表。（后端给的路由表上肯定是没有component加载组件属性的，前端需要直接处理下的）

　　可能遇到的问题

•  动态添加路由表侧边菜单未更新  https://juejin.cn/post/7004126407601160200 
  因为使用router.addRoutes来进行添加路由无法更新this.$router.options。所以主要的实现方法是通过store来存储路由表。

• 刷新页面，动态加载的路由页面，出现404。

2、按钮权限  https://blog.csdn.net/xgangzai/article/details/138143461

　　除了页面权限外，我们还有按钮权限。可以通过自定义指令来完成，permission.ts 中定义一下

• 权限标识（权限码）：针对系统访问资源的权限标识，如：用户添加、用户修改、用户删除。
  权限字符串命名规范为：模块:功能:操作，例如：sys:user:edit

扩展

一些特殊情况下，自定义指令隐藏无法满足我们想要的效果，我们可以定义一个公共函数检测权限是否存在，再通过 v-if 进行隐藏