vue-admin-template获取后端路由表动态生成权限

最近有个项目用的vue-admin-template，这是个简易模板。
但是没有具体权限功能的实现，作者推荐的是前端控制。
但我个人能力有限，研究半天也没整明白，所以决定后端来控制。
根据模板以及参考了其他文章，主要思路如下：

• 用户登录login获取token
• 拿着token请求用户信息，同时后端返回一个路由表
• 前端解析后动态添加路由表，同时存储到本地localstorage
• 刷新页面或者退出登录或者登录过期等时，会进行相应的判断，重新渲染路由

接下来按步骤详细讲解，注意调试的时候可能会无效，可以尝试清除浏览器缓存再试

1. 在router文件夹下新建_import.js，用于匹配组件
2. 在utils文件夹下新建addRouter.js，用于解析后端返回的路由，具体解析方法和数据形式还是要看项目具体来分析
   
3. 修改permission.js，动态添加路由
   
   以上为动态添加路由函数，注意404页面要在这最后添加到路由表中，不能放在router默认的路由中，否则刷新页面就会跳转到404
   
   以上为请求路由数据函数以及从本地获取路由表函数
   
   以上为修改的beforeEach
4. 把router文件夹中的index.js中的路由删掉，只留默认自带的路由，我这里留了3个
   
5. 修改store文件夹中index.js，添加路由表状态和获取路由表的方法
   
6. 修改store/modules中的user.js，在login时保存登录状态，在logout时清除登录状态以及本地保存的路由表
   
   
7. 修改layout/component/Sliebar中的index.vue
   
8. 使用mock模拟下后端返回的路由信息，我是在getInfo中与用户信息一起返回的
   我是根据模板模拟的数据，具体需求还是要具体分析
   
   至此就大功告成了
   

参考文章：
vue+element后台管理系统，从后端获取路由表，并正常渲染
记一次Vue动态渲染路由的实现

附：
本人已上传到码云
觉得本文有帮助的 可以点个赞哈