vue-router根据权限动态添加相关路由-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

vue-router根据权限动态添加相关路由

简介: 在有权限的项目里,需要根据权限动态添加路由,使用addRoutes方法 import Vue from 'vue' import Router from 'vue-router' import Store from '.

在有权限的项目里,需要根据权限动态添加路由,使用addRoutes方法

import Vue from 'vue'
import Router from 'vue-router'
import Store from '../store'

import routes, {asyncRouterMap} from './routers.js'
Vue.use(Router)

let router = new Router({
  // mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes
})
let flag = true // 只动态添加一次路由,防止进入回调地狱,当然也可以根据别的状态来判断
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
  } else {
    if (flag) {
      flag = false
      Store.dispatch('getMenu').then(() => {
        let routes = filterRouter(asyncRouterMap, Store.state.menuList)
        router.addRoutes(routes)
        next({...to, replece: true}) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
      }).catch(() => {
        next({path: '/login'})
      })
    } else {
      next()
    }
  }
})

const filterRouter = (asyncRouter, menu) => {
  asyncRouter.children = asyncRouter.children.filter(item => {
    return menu.some(i => {
      if (i.children && i.children.length) {
        return i.children.some(k => {
          return k.path === item.path
        })
      } else {
        return i.path === item.path
      }
    })
  })
  
  return [asyncRouter]
}

export default router

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章