权限控制
文/ziven
标题图/stocksnap
什么是权限控制呢？并且权限控制要发生在什么系统，运行什么阶段呢？还有就是长久以来，依照我们的经验，权限控制其实存在于管理系统各个方面、各个组件。因此我们常常会需要不同的权限控制粒度来控制系统，那么vue是如何处理这些不同粒度的权限控制的呢？接下来，本坑依据自己的理解与实际编码过程并且参考相关文章来阐述与解释这些问题和相关议题，有错记得评论告诉本坑哟！
动态权限控制粒度
权限控制在过去的时代，大多是后台进行处理的,通过数据库的数据来配置并且用于查询用户的权限，通过对jsp，html进行条件显示或者重定向来显现一个角色的权限，然而既然是过去的时代就是已经过去了。前后端分离意味着两者特别是前者有更多的自由度，而后台无法直接的介入。那么现在，权限控制要交给谁控制更好呢呢？仔细想想不管谁控制，其目的是一样一样的，都是为了同一个目的。为了解决前端的需求，比如路由条件显示，前端会自己进行权限控制，这些后台是做不来的。而后台往往会因为安全性，也进行控制。既然为了同一个目的，在实际操作的大多数情况下是各自都会在各自的领域内进行控制，有时候可能是重复的，但并不会因此造成困扰或者说对系统造成压力。
在我们经常遇到的管理系统往往都是有很多角色的，比如说一般用户和管理员两个角色。我们的管理系统也往往有这样的需求：不同角色显示不同的内容。比如说每个角色导航栏是不一样的、同一个页面按钮不同角色可见或不可见等等。所以大致可以看到两种粒度：一个是导航方向上的权限控制，它控制的是不同角色显示不同的功能模块；一个是小一点的组件上的控制，就是前面所说，不同角色显示或不显示，可点击或不可点击等等。
对应vue来说，我们往往对小范围的组件的权限控制采用v-if或v-show来控制，实践证明这是最方便与好理解的方法。所以这个层级就没有什么好聊的了，本坑要聊的是后者。功能模块的权限控制，比如不同角色显示不同的导航栏如何做呢？还用v-if？那路由信息又如何做呢？显然这种方式用到导航栏的控制是不科学的。
幸运的是官方文档提到了路由元信息meta 字段可以用于权限的控制，官方的例子显示它可以用来控制用户是否有权限进入当前路由。它的作用在于比对，通过比对来形成控制权限，相同meta的路由形成一个角色的权限范围。同样的从官方的API的addRouters()可以手动添加路由，这样的话，我们要做的是写一个方法，这个方法通过比对meta信息,收集同样类型的路由，然后addRouters到现在的路由里，形成目前访问的导航权限范围，达到控制功能访问的目的。这整个过程发生在哪里？在我们进入主页面之前，登录操作之后。
权限控制的实现
我们首先要实现的目的是用户登录后，通过判断用户角色类型，然后收集该角色可访问的路由，通过addRoutes加到路由当中，最后作为数据渲染到导航栏里。
本坑开发的express系统中，用户登录后可以获得用户信息的内容有名字、token、角色类型。系统有两种登录方式，一个是用户名登录，第二个是第三方授权登录。前者的角色类型是1，后者的类型是2。1代表管理员，2代表普通用户。脚本main.js可以看到路由跳转前的逻辑处理。其中加入了路由收集和载入到vue-router中。
登录后存放在cookie的用户信息
那么路由信息怎么收集呢？导航栏组件如何根据收集信息生成正确渲染呢？
我们需要给路由属性添加一些额外信息，各位看官根据实际需求来做，解决问题怎样都行。
路由信息属性
为了收集路由信息，本坑在脚本中permisson.js 添加GetPermissionRouter方法来实现，所有的路由信息保存在state中。
通过自定义子组件sideMenu.vue来动态生成导航组件。
好了，Vue内容管理系统的搭建系列文章到这篇就大体上要加个小暂停了。后续本坑将完善系统的前端整理，UI美化，也会把后台代码部署到云服务器中，这样可以实际运行整个前后端系统。如果这些系列文章对您有一丝丝帮助，点个赞，一起加油。
本坑系列文章：
Vue 内容管理系统的搭建（一）
Vue 内容管理系统的搭建（二）
Vue内容管理系统的搭建（三）
Vue内容管理系统的搭建(四)之第三方授权与验证
参考文章
手摸手，带你用vue撸后台 系列二(登录权限篇)
网友评论