Vue管理后台由角色动态生成路由及菜单（4）- 引入axios获得roles动态生成菜单

1.安装axios，创建请求和响应拦截器，建立环境变量文件，模拟获得token和userInfo接口。

     终端中运行  npm i axios 安装axios。在/src目录下创建utils/request.js 用来封装请求。同时在项目根目录下创建env环境变量文件( .env.development为开发时环境变量，.env.production为生成时环境变量 )。 axios.create的baseURL使用环境变量，因为每次修改环境变量都需要重新编译才能生效，所以平时开发的时候为了省时都是直接在此添加一行实际用到的Url（切记提交代码前改为使用环境变量的 (づ╥﹏╥)づ 之前忘记了2次导致生产环境请求了测试环境服务器，教训啊）。

 request.js中主要做了创建axios实例并拦截请求和响应，做一些处理。实际项目中根据需要在请求拦截中附加token，在响应拦截中根据后端返回的响应码做对应的处理。

request.js大概代码：

2. 创建测试api。在src/下创建apis目录，生成login.js用来处理和登录相关的api。这里测试只用了login登录和getInfo获得用户信息两个接口

然后在之前views/Login.vue测试页面中简单写一个输入用户名+密码以及一个登录按钮。点击登录按钮dispatch登录操作对应的loginFn，拿到token并存储到state中；后继续dispatch获得用户信息对应的getUserInfo拿到roles和userInfo并存储到state中。这里获得token后存到了本地，取的时候也从本地取，本地没有时默认为''，防止刷新后store中数据丢失又需要重新登录。

Login.vue中dispatch获得用户信息后就可以跳转到首页了。

3. 到这里就只需要根据用户的role过滤出他有权限看的页面的路由动态生成左侧导航菜单，并且使用router.beforeEach路由守卫进行权限判断拦截处理。

之前为了测试，router/index.js中new VueRouter时传入的routes为所有路由，现在改为只传入不需要权限就能访问的constantRoutes；同时把store/index.js中的state中 routes 改为空数组，新增2个方法，调用getUserInfo后拿到rules根据用户角色从所有路由中过滤能访问的路由数据赋值给state中的routes。

filterAsyncRoutes方法中，在有子路由即有children情况下使用递归处理：

在/src下生成permission.js进行路由守卫，并在main.js中引入。代码仅提供思路参考，实际根据项目完善异常处理

到这里根据用户角色生成动态路由全部实现思路走了一遍。实现方式只是多种优秀方式中的一种，这4篇关联文章仅供自己记录实现思路回顾用，如有见解欢迎交流