element-admin后台根据权限生成权限菜单，前端动态生成路由

前言： 

通过vue-admin-template创建的项目中并没有与权限配置相关的文件和代码，需要手动去vue-emement-admin拷贝部分代码

拷贝开始

1、对比模板代码就知道Vuex文件管理的文件夹store下面很多内容有更改，所以直接复制过来，权限文件主要是permission,但是在getters和user里面也添加了内容

2、然后左侧菜单是动态加载的，需要在菜单page调用vuex，拷贝layout/components/Sldebar/index.vue；也是整个文件复制

3、根目录下的src/permission.js，同样直接复制即可

登陆流程分析

在views/login/index.vue页面设置登陆点，进入提交一个vuex的action

在vuex的action中提交登陆

去api/user.js中调用login方法

后台逻辑处理部分，返回状态码

作者在前端设置了axios的全局拦截器，将收到的状态码做逻辑判断code正确再返回

如果经过拦截器，说明返回成功，进入api/user/login的成功的回调返回给vuex中user/login方法，将token保存到vuex，设置cookie

然后在views/login/index.vue页面进入vuex中login action的成功回调，处理重定向

然后进入permission.js中间件，根据返回的token到vuex的action的user/getInfo调接口api/user/getInfo

然后去vuex的getInfo的action中调用api/user/getInfo接口往后端发请求

 

后端先简单处理请求，后返回

前端同样是经过Axios拦截器处理过滤，过滤之后回store/user/getinfo，即接口api/getInfo的回调中,如果有data，则去设置全局头像，名字信息等信息。没有就reject。处理返程回到permission.js，将返回的结果中的role信息提取出来，后面动态生成路由菜单

然后去vuex，执行permission/generateRoutes方法，根据返回回来的权限，加载可以访问的路由，通过router.addRoutes()方法动态挂载路由

然后再Slidebar中通过vuex获取路由表，加载出来

爬坑：

有一个问题困扰我很久，页面刷新之后，就进入404页面，

最后经过各种调试发现这里404应该放最后，放到asyncRoutes中，因为这个模板开始是没有动态路由的，404页面在constantRoutes中，而现在采用的权限控制，需要放到asyncRoutes中的最后。

 其实在官方文档也有说明该问题，只是开始没注意：