如何找到vue权限问题的终极解决方案？

本文共计2507个文字，预计阅读时间需要11分钟。

前言：最近在忙着一个用Vue做的权限管理项目，实际上在此之前，我也研究过Vue的权限如何实现，并写过一篇博客。但真正应用到项目中时，还是发现了一些问题。

1. 权限验证方式的选择

2.路由守卫的设置

3.动态路由的生成

4.权限数据的存储与更新

下面分别针对这些问题进行说明。

前言

最近一直在忙着一个用vue来做的权限管理的项目，其实在此之前，我也研究过vue的权限如何实现，并且也为之写过一篇博客，但当真正应用在项目中的时候，还是发现了许多问题，所以此篇也会就着我在项目中遇到的一些问题，拿出来和大家分享一下，当然示例代码还是我的github仓库中的ant-design-vue-ms（本地下载）。

权限问题解决思路

对于一个前后端分离的项目而言，权限不再是仅仅靠后端来控制，后端只能控制接口的权限，前台的页面显示还是需要我们来控制，针对vue的项目，首先我想的是当权限不多，并且都是单个权限的情况下，我们完全没有必要使用vue中提供的addRoutes的方法，可以使用动态组件来做，即我们根据后端返回的角色，来细度控制动态组件的显示内容，所谓动态组件其实就是vue内置提供的component组件

<component :is="currentComponent"/>

相信看到这里，熟悉的同学应该已经想起来了，这样的话，我们就不需要用到vuex，以及路由配置等等复杂的问题，单纯靠后台返回的角色名称就能解决所有的问题了，看到这里是不是觉得今天的内容就这些了，别着急，下面还有“好看的”。

权限设置中的问题

这样虽然能解决一些简单权限的问题，但是针对稍微复杂一些的权限应用，就显得有些力不从心了，当角色过多，并且还包含了混合角色的权限的话，则会衍生出很多问题，这里也是列举我遇到的一些问题，同学们可以细细推敲一下。