浅谈Vue＆Vue-router如何实现权限控制

前言

在需要权限控制的管理系统中，我们经常会看到某些用户拥有某个菜单，或者某个页面，而其他用户则没有。这就是权限控制的表现；权限控制需要结合后台进行管理，后台根据某个用户身份信息，返回该用户所拥有的权限；则主要是使用筛选路由实现权限显示对应的模块与内容

一、配置路由

该文件放在文件夹下，是路由的文件，代码如下

这是主路由，在还没登录时，大家都可能访问到的路由；还有一个首页路由需要根据权限动态注入，动态注入的逻辑代码放在了文件中。需要动态注入的路由文件我命名为，其中代码如下:

为首页的路由与主路由同级，不同用户的权限看到的模块就是中的路由，在权限筛选的时候回剔除用户没有权限的模块，剩下的模块就会显示到菜单中

二、筛选路由

中筛选路由的关键代码如下：

里面有个判断是针对特殊模块进行处理的；如果本地路由的字段与服务器获取模块并加上后的字段相对应，则是允许的路由模块，然后通过路由的属性把该路由模块包含的一些信息传递给该路由对应的;

三、注入路由

路由筛选完之后，需要把允许的路由注入到主路由中；注入方式是vue实例中对象的方法：

四、菜单映射

读取允许的路由列表，将这些路由映射成菜单，每个菜单都会跳转到对应的路由；每个路由都会展示对应的组件，组件根据路由传递的参数显示不同的内容

至此路由控制权限基本上已经完成，这里写的只是个大概的思路，如果有什么特殊的路由需求和更加精细的权限控制，可以在筛选、注入和菜单映射这几步做文章