最近一直在忙着一个用vue来做的权限管理的项目，其实在此之前，我也研究过vue的权限如何实现，并且也为之写过一篇博客，但当真正应用在项目中的时候，还是发现了许多问题，所以此篇也会就着我在项目中遇到的一些问题，拿出来和大家分享一下，当然示例代码还是我的github仓库中的ant-design-vue-ms （本地下载）。
权限问题解决思路
对于一个前后端分离的项目而言，权限不再是仅仅靠后端来控制，后端只能控制接口的权限，前台的页面显示还是需要我们来控制，针对vue的项目，首先我想的是当权限不多，并且都是单个权限的情况下，我们完全没有必要使用vue中提供的addRoutes的方法，可以使用动态组件来做，即我们根据后端返回的角色，来细度控制动态组件的显示内容，所谓动态组件其实就是vue内置提供的component组件
<component :is="currentComponent"/>
相信看到这里，熟悉的同学应该已经想起来了，这样的话，我们就不需要用到vuex，以及路由配置等等复杂的问题，单纯靠后台返回的角色名称就能解决所有的问题了，看到这里是不是觉得今天的内容就这些了，别着急，下面还有“好看的”。
权限设置中的问题
这样虽然能解决一些简单权限的问题，但是针对稍微复杂一些的权限应用，就显得有些力不从心了，当角色过多，并且还包含了混合角色的权限的话，则会衍生出很多问题，这里也是列举我遇到的一些问题，同学们可以细细推敲一下。
如果是混合角色的话，动态组件的路由跳转实际都是跳转到一个页面，但是混合角色肯定会一个页面中跳到不同角色的页面，这样可能我们要多写很多层的判断，权限混合越多，就越难以去判断。
动态组件扩展性比较差，如果我们再添加一个权限呢，就要再多加一个动态组件的内容，并且出现混合权限的话，那改动的地方就更多了
所以综上所述，最终我还是选择了传统的addRoutes，那么肯定会有同学问了，既然这个方案不行，那干嘛还要用呢。问得好，其实动态组件就是一种尝试，只有知道错了，不满足需求了，我们才能更知道为什么会去使用传统的addRoutes的权限方案。
权限问题解决方法
所以我们来看看addRoutes带来的一些“好处”：
一次配置，多处使用，我们配置好了动态路由以后，不论后期添加多少权限，都能很好的显示路由跳转等等，并且也不需要改动代码，只需要添加新增角色的模块就可以了。
遇到混合角色的问题，如果内容布局类似的话，我们可以使用自定义指令来区分要显示的模块，这样的话如果一个账号同时拥有很多角色的话，那么包含这个角色的模块则会相应的显示出来，就不会出现需要判断究竟显示哪个模块了，也不需要单独为某个角色去设置一个页面来显示了。
相信做过权限的同学对上面的内容还是有一些心得的，然后我们按照该有的步骤一步一步来，这些步骤在上面我的github中已经有了，大家可以对照一下。
1、全局导航守卫的设置，此处设置全局导航守卫，我觉得更多是为了数据持久化，大家都知道，vuex虽然非常好用，但是会有刷新丢失数据的情况，因此针对这种情况，我们使用导航守卫，每次刷新的时候，会重新请求后台的接口来获取角色信息。
if (store.getters.roles.length === 0) { store .dispatch('GetInfo') .then(res => { const roles = res.data.resultData && res.data.resultData.roles store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表 // 动态添加可访问路由表 router.addRoutes(store.getters.addRouters) }) }) .catch(() => { store.dispatch('Logout').then(() => { next({ path: '/user/login', query: { redirect: to.fullPath } }) }) }) } else { next() }
这里代码做了简化，主要给大家看下上面会有一个角色判断长度，主要是当我们不刷新的情况，页面角色信息不回丢失，因此我们也就没有必要去请求后台获取角色信息了，来节省请求数量。
2. 通过上面的代码可以看到，我们首先是请求的角色信息，然后请求了生成路由的GenerateRoutes的方法，方法是写在vuex中的action里面的，这部分的内容因为网上有很多教程，其实主要归纳一下，就是对路由进行递归过滤，过滤出符合角色的路由，然后将静态路由和过滤出来的动态路由链接起来