vue-elmentui-template router权限控制的问题

众所周知，template是admin的简化版本，这个简化就简化掉了很多功能，其中包含了权限控制，虽然，在全局template有路由控制的文件，但是整个菜单的权限控制是没有去做的。这样我们只能把admin的权限控制去引入进来，我本人项目的权限控制相对简单，只有2个角色，并且没有复杂的逻辑，所以在引入admin权限控制我认为很复杂的部分去做了简化，但是原理都是一样的。现随便记录下，方便有同样需求的小伙伴们去实现。
首先，把admin的store内的modules中的permission.js文件复制粘贴过来。就像这样：

为什么要这么去做了，因为，我在全局的路由守卫里面去写了权限信息获取的控制，为什么要这么去写呢？很简单，因为admin中是这样去做的。

这就是admin的权限的判断，这个判读template是没有，所以要加进去，它是判断vuex里面有没有，没有的话就通过getInfo拿到登录时候的角色权限去走那个叫permission/generateRoutes的方法。而后面那个方法就是在store modules里面的permission.js文件中。所以要添加那个Js。添加完成后千万记住要在store index.js进行引入，不然会报错，因为暴露出来的store的方法是在index中的，不引入就还是拿不到。就像这样

由于我们后台在登录的时候就传了角色信息，没有复杂的角色信息也就是没有userinfo这个接口，所以我简化了访问接口拿角色的写法

这是我全局的那个permission的写法，这里只要保证你的rosles是个数组，并且你的登录的角色信息放在了这个roles中就行了，无论你用什么方法获取这个角色都行。
以上做得这些其实都是在做一件事情，那就是保证permission/generateRoutes的这个方法顺利进行，那么我们现在去看看这个方法

也就是上图的下面那个方法，通过这个方法得知，通过上面那个方法的判断，把用户添加了角色的信息放在了asyncRoutes这个里面，并且通过set_routes这个mutation把这个动态路由信息添加到了vuex中，也就是说动态的根据角色给路由就是这个，那么我们怎么去渲染这个路由呢？这里的asyncRoutes是个变量，然后就看这个变量是咋来的，

从这里看出都是路由引入进来的，你打开你的路由页面，就是router文件夹下的index文件，你会发现，你的这个文件中并没有asyncRoutes,只有constantRoutes，这个时候就需要我们手动去添加。通过名字可以推断出，async无非就是异步的意思，涉及到异步一般都是指动态，那么我们可以把静态的页面，也就是任何用户进来都可以看到的页面放在constantRoutes中，需要权限控制看到的页面放在动态的里面，修改后如下

这里说一下，最开始的绕了很多坑，就是无论我怎么修改这里的地方，都无法做到自己能控制左边栏的显示，通过强大的百度引导系统，我发现有个很关键的代码信息，当然，大家可以自己去推理这句重要的话在什么位置。
那就是侧边栏的回显

return this.$router.options.routes这是之前template的写法，也就是说，只要是router里面的没有通过我们的动态判断，全会显示。那么我们之前说我们把动态的路由存在了vuex中，这个时候我们就可以通过vuex工具去查看到底有没有，如果有是在什么地方

上面7个是动态添加的，12个是所有的，那么我们就获得这个值返回出去，至此，template简单的仿admin简单版本的权限控制完成。

以上