前端_应用控制用户访问权限

访问权限控制，即不同角色的人员登录应用后，能够看到或操作的内容不同，主要涉及

本文针对以上几点进行展开

对于自有登录页面的应用，非法账号登录提示“账号或密码不匹配”等提示语，合法账号登录提示“您暂无本应用的访问权限” 等，并停留在本页面不发生跳转

对于使用单点登录的应用，因自身没有登录页面，当合法账号登录应用后，需在页面发起的第一个接口校验该用户的权限范围，该接口通常用来单纯的获取用户身份信息及权限列表，响应速度快。

实现思路是：在系统任意一个路由登录时（用户可能从任意一个页面登录进来访问本系统，不能只把范围限制在首页上），检查当前状态管理机上是否拥有用户信息：

判断系统是否有有效的用户信息

如果系统还未获取过用户信息及权限信息，则发起请求：

系统级的权限控制往往通过一个简单的字段来标识即可

控制页面访问分白名单页面和非白名单页面两种情形。

（1）是否为免权限页面，如首页等这些页面是无需任何权限即可浏览的公共页面，通常我们会维护一个为 whiteList 的数组，遍历查询前往页面是否在白名单内，- 有：放行；- 没有：执行以下（2）中逻辑

本文以首页为白名单页面为例

（2）对于非白名单有权限控制的页面，使用基于Vue-Router，Vuex 以及 AddRoutes 进行权限控制

（2.1）在Vue-Router的 index.js 中定义好基础路由模块，通常404等页面、白名单可以直接在这里定义，也可以定义一个白名单路由模块

（2.2）设置初始路由内容，并对外暴露

（2.3）前后端对每一个页面路由根据其特性约定一个“路由Key”用来识别该路由，通常建议遵循一定的规则如使用 “系统编码菜单页面”，举个栗子，AM_APPROVAL_APPLYBYUSER。

     - 设置“路由Key”的好处是：将路由信息映射成一个标准信息元，后端仅关注Key和权限对应关系，前端只关注Key和路由Path对应关系，做到前后端分离

（2.4）对功能型页面路由，以功能或菜单为组划分成不同的模块，且在模块中每个路由 meta
属性中定义约定好的路由Key

（2.5）做好以上准备后，我们开始实现异步动态路由

（2.6）定义 permission.js 文件用来专门管理页面级访问权限，并引入到 main.js中。

（2.7）和系统级权限控制类似，进入页面的时候，检查是否已获取用户权限信息，如未获取，需发起请求

（2.8）发起请求获取用户信息，并将结果 addRoutes到基础路由内容中

【注1】 permission/getAsyncRoutes 在Vuex的action中获取路由Key列表，以下代码中的asyncRoutes，是本地未过滤的全路由列表，在路由，accessRoutes是权限路由列表

【注2】根据“路由Key”列表，构建用户权限页面 generateAnsycRoutes()，返回权限路由列表

总结一下：

控制用户是否能操作某些功能按钮，这部分涉及业务逻辑更强，通常ToB产品会由企业级权限体系一同控制，ToC产品会将用户分为不同类型，享有不同权限。权限划分有两种不同类型：

（1）纵向等级：该方式将用户类型划分为：“普通用户”，“会员”，“超级会员”， “应用管理员”等级别，越往后权限越高，所能操作的内容也越多。

该类型的实现思路是在以上页面级权限进行的扩充，后端只要在每个路由Key上返回相应的按钮Key，前端根据按钮Key来控制按钮是否可视，或可操作。

（2）横向等级：该方式通常指不同类型的用户，需要操作不同的功能，如： “教师”，“学生”，“后台管理员”等

该类型的实现思路是在获取用户身份信息的时候拿到用户类别，根据用户类型对页面进行展示

接口权限目前一般采用 jwt的形式来验证，未验证通过通常返回 401 Authentication Required。跳转至登录页重新登录，拿到合法token后，存储在cookie或ssessionStorage中，

与以上不同的是，接口级权限一般和UI库关系不大，常用在管理后台等需要校验用户登录信息或有数据权限控制的页面中，也有可能是需要实时校验当前账户是否合法。例如，用户在页面上长时间停留未操作超过token有效时长，或在其他页签上登录了别的账号等情况

本文以使用 axios 的请求拦截器为例来实现，如下

以上针对Vue框架对前端如何控制应用的访问权限进行描述，主要讨论的是思路，如有描述不正确的地方欢迎大家讨论指出