需求:增加权限控制,实现不同角色显示不同的路由导航
思路:每次登陆后请求接口返回当前角色路由
核心方法:vue-router2.2.0的addRoutes方法 + vuex
以下是我实现的获取菜单路由的方法,我将该方法的调用放在首页组件的生命钩子中,即便用户刷新浏览器清空了路由还是会重新调用接口获取,不至于会丢失。同时考虑到会有切换用户的可能,所以不将获取到的路由信息保存到cookie或者localstorage当中
获取菜单之前先判断routerState,避免多次请求, 我这里使用element-ui的导航菜单功能v-for循环this.myRouter参数即可显示动态路由导航
1 /** 2 * 获取菜单 3 */ 4 getMenu () { 5 if (this.$store.getters.routerState === false) { 6 // 清理已经存在的动态路由 7 this.clearDynamicRoute() 8 // 更改请求路由状态为true 9 this.$store.commit('SET_ROUTERSTATE', true) 10 getMyMenu().then((res) => { 11 if (res.code === '0') { 12 // 格式化路由,将数据转为addRoutes可接受的route格式数组 13 let myMenu = this.formatMenu(res.data.menu) 14 if (myMenu.length <= 0) { // 没有动态路由 15 return 16 } 17 for (let index = 0; index < myMenu.length; index++) { 18 // 将请求的路由先存放到options对象中 19 this.$router.options.routes.push(myMenu[index]) 20 } 21 // 将完整需要显示的路由添加进去 22 this.$router.addRoutes(this.$router.options.routes) 23 // 这里将路由显示在页面上 24 this.MyRouter = this.$router.options.routes 25 } 26 // 在这里就可以打印出新路由 27 console.log(this.$router) 28 }) 29 } 30 }