vue-admin-template获取后端路由表动态生成权限
最近有个项目用的vue-admin-template，这是个简易模板。
但是没有具体权限功能的实现，作者推荐的是前端控制。
但我个人能力有限，研究半天也没整明白，所以决定后端来控制。
根据模板以及参考了其他文章，主要思路如下：
- 用户登录login获取token
- 拿着token请求用户信息，同时后端返回一个路由表
- 前端解析后动态添加路由表，同时存储到本地localstorage
- 刷新页面或者退出登录或者登录过期等时，会进行相应的判断，重新渲染路由
接下来按步骤详细讲解，注意调试的时候可能会无效，可以尝试清除浏览器缓存再试
- 在router文件夹下新建_import.js，用于匹配组件
- 在utils文件夹下新建addRouter.js，用于解析后端返回的路由，具体解析方法和数据形式还是要看项目具体来分析
- 修改permission.js，动态添加路由
以上为动态添加路由函数，注意404页面要在这最后添加到路由表中，不能放在router默认的路由中，否则刷新页面就会跳转到404
以上为请求路由数据函数以及从本地获取路由表函数
以上为修改的beforeEach
- 把router文件夹中的index.js中的路由删掉，只留默认自带的路由，我这里留了3个
- 修改store文件夹中index.js，添加路由表状态和获取路由表的方法
- 修改store/modules中的user.js，在login时保存登录状态，在logout时清除登录状态以及本地保存的路由表
- 修改layout/component/Sliebar中的index.vue
- 使用mock模拟下后端返回的路由信息，我是在getInfo中与用户信息一起返回的
我是根据模板模拟的数据，具体需求还是要具体分析
至此就大功告成了
参考文章：
vue+element后台管理系统，从后端获取路由表，并正常渲染
记一次Vue动态渲染路由的实现
附：
本人已上传到码云
觉得本文有帮助的 可以点个赞哈
以上是 vue-admin-template获取后端路由表动态生成权限 的全部内容， 来源链接： utcz.com/z/377004.html
