vue权限控制攻略（iview-admin）

作者：轻酌~浅醉

1，方式

在meta中添加access

只显示在当前用户组中定义的

第一个参数为当前要访问的页面的name传进去 ，第二个参数为用户的权限字段列表（登录之后通过接口获取）
canTurnTo会通过第二个参数（用户的权限字段列表）进行匹配，如果当前页面，当前用户是有权限的，显示当前页面，否则跳转到401页面

2，通过服务端返回一个路由列表，从而进行一个过滤，动态的把过滤出来的路由列表挂载在路由实例中

eg:在mork中的user.js中进行模拟后台响应的数据

为true，代表可以访问这个页面
为false代表访问不了
component，代表组件级别的路由权限
这种方式有一个弊端，路由实例里每一个路由都要有一个name
并且不能和path重复

将不需要权限控制的路由分离出来

将默认导出的路由更改为非默认导出

待会进行权限过滤时候，过滤的就是routerMap数组，匹配不到直接显示404页面
在router文件夹引入的时候
将

更改为

接下来，通过接口，拿到用户可以访问哪些的接口列表，
跟这个表比较

进行筛选，如果结果为true,添加进去，为false,不添加

给store文件夹中的model文件夹添加一个文件router.js,专门用来管理路由----

routers为最后挂载在路由实例的路由

待会在此处添加一个合并路由列表的方法

定义actions

最后导出

在store文件夹下的index.js加载

为了演示，注释·持久化插件

在router文件夹的index.js注释

写一个新的
1，存一个状态

默认是false,如果你调接口获取到了用户的权限列表之后，把它设为true,如果是false,说明还没有获取调权限列表接口

调接口拿到列表

调第二个接口（赛选过滤方法）

通过dispatch合并路由列表----store中的router.js文件
注意：

entries可以把对象转为数组，第一个值为当前的属性名，第二个值为属性值

如果所有列表都可以访问
直接赋值

如果不是所有列表都可以访问，用递归做筛选

得到列表之后进行合并，通过commit进行修改

commit为store方法调用方式
合并需要注意合并前后问题

这个路由对象一定要写在所有路由的最后面

修改权限列表状态

整理好的路由列表resolve出去，这样，在router文件首页就可以直接获取到

调用前面创建好的路由实例中的addRouters方法，参数写我们拼接好的路由列表，给它动态的挂载上去

挂载完之后，调用

如果出现异常，跳转到login中


这个错误原因是因为我们不该使用store里面的原始对象，而要进行一个深拷贝

深拷贝