前端权限控制_yin_you_yu的博客-****博客_前端权限控制框架  https://blog.****.net/yin_you_yu/article/details/80408340

1 前端权限控制具体指什么

前端权限归根结底是请求的发起权，请求的发起可能由页面加载触发，也可能由页面上的按钮点击触发。

总的来说，所有的请求发起都触发自前端路由或视图，所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是：

1. 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页；

2. 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件；

3. 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时候请求控制可以用来兜底，越权请求将在前端被拦截。

2 怎么做前端权限控制

控制的第一步是知道用户拥有哪些权限，所以用户登录后第一件事是获取权限数据。

权限数据至少应该包括路由权限和资源权限。

路由权限，就是用户可访问的路由集合，以此作为设置前端路由和生成导航菜单的依据；

资源权限是用户可访问的资源集合，“资源” 概念来自 RESTful 架构，如果对 “资源” 感到陌生也可以简单理解成用户能够发起的所有请求集合，以此作为视图控制和请求拦截的依据。

这里插入讲一下 “角色” 这个概念，可能有的系统会通过角色来做权限控制，我理解的角色就是特定几个资源打包后的快捷方式。

引入角色这个概念的好处是，后台可以通过赋角色的方式，很方便的为某一类用户赋予特定的资源集合，而角色的作用应该仅限于此，尤其不应该将角色用做前端权限控制的依据，因为角色背后的资源权限是后端动态可配的。

我们也可以创建一个名字叫做 “总经理” 的角色，但其实一个资源都没有，所以前端应该始终关注资源权限本身，而只将角色视为用户的一个普通属性就好了。

有了权限数据，下一步就是分别-实现对路由、视图、请求的控制。

2.1 路由控制 

首先要实现动态菜单，这样就可以对常规访问方式进行限制；对于非常规访问方式比如手动修改 url，可以从前端路由处着手做控制。

路由控制的思路有两种，一种是初始化，即挂载全部路由，每次路由跳转前做校验；

                                       另一种是只挂载用户拥有的路由，相当于从源头上做了控制。

前者的缺点很明显，每次路由跳转都要做一遍校验是对计算资源的浪费，另外对于用户无权访问的路由，理论上就不应该挂载。

后者解决了上述问题，但仔细想这里存在一个悖论，要按需挂载路由就需要知道用户的路由权限，要知道用户的路由权限就需要用户先登录进来，但路由没有加载应用也没有初始化，用户从哪儿登录？

这里又可以有两种解决思路，一种是单独做一个登录页，登录后带着用户凭据跳转到前端应用；另一种是先初始化一个只有登录路由的应用，用户登录后动态添加路由，当然这需要框架提供支持。

2.2 视图控制

需要实现一个可以在视图层调用权限验证方法，输入用户期望的权限，输出是否拥有该权限，将调用这个方法的结果，作为界面上需要验证权限的控件或元素显示与否的依据。

2.3 请求控制

实际上就是为你使用的 HTTP 库实现一个请求拦截器，对将要发起的请求与用户资源权限进行匹配，拦截越权请求。

这里值得一提的是对于携带参数的 url，需要先进行模式约定，比如/people/1这个 url 可以在权限中描述为/people/**，那么拦截器中就要先将这种 url 处理成约定后的格式，然后再进行权限验证。