vue 動態添加路由及部分權限

// 菜單模塊
let newRoutes = [
  {
    path: '/',
    redirect: '/home',
    component: resolve => require(['../components/common/Home.vue'], resolve),
    meta: {
      title: '/',
      requiresAuth: true
    },
    children: [
      {
        path: '/home',
        component: resolve => require(['../components/page/home.vue'], resolve),
        meta: {title: '首頁', requiresAuth: true}
      },
      {
        path: '/building',
        component: resolve => require(['../components/page/buiding.vue'], resolve),
        meta: {
          title: '構建中',
          requiresAuth: false
        }
      }
    ]
  }
]

// 靜態路由
let router = new Router({
  // mode: 'history',
  routes: [
    {
      path: '/login',
      component: resolve => require(['../components/page/login.vue'], resolve),
      meta: {
        title: '登錄',
        requiresAuth: false
      }
    },
    {
      path: '/404',
      component: resolve => require(['../components/page/404.vue'], resolve),
      meta: {
        title: '404',
        requiresAuth: false
      }
    }
  ]
})

// 聲明白名單
let arr = []

// 登錄攔截器
router.beforeEach((to, from, next) => {

  let isLogin = localStorage.getItem('uid')

  // 判斷該路由是否需要登錄權限
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (isLogin) {
      next()
    } else {
      return next({path: '/login' })
    }
  } else {
    next()
  }

  // 判斷第一次登錄頁面的時候 及 刷新頁面的時候
  if  ( (to.path == '/home' && from.path == '/login' && localStorage.getItem('uid')) || to.meta.requiresAuth==undefined) {
    // 獲取路由，請求數據
    getMenu().then((res) => {
      localStorage.setItem('menuList',window.btoa(window.encodeURIComponent(JSON.stringify(res))))
      // 菜單模塊
      res.forEach(e=>{
        e.children.forEach(i=>{
          arr.push(i.paht) // 將路由存入白名單
          newRoutes[0].children.push({
            path: i.path,
            component: resolve => require(['../components/page/'+ i.str +'.vue'], resolve),
            meta: {
              title: i.elementLabel,
              requiresAuth: true,
              params: i.children
            }
          })
        })
      })
      // 添加路由
      router.addRoutes(newRoutes)
      localStorage.setItem('newRoutes', window.btoa(window.encodeURIComponent(newRoutes)))

      // 匹配白名單
      if ((arr.indexOf(to.path)>=0)&&to.path!='/building') {
        next()
      } else {
        next('/home')
      }
    })
  }

  if (to.matched.length ===0) {
    // 如果未匹配到路由
    if (!localStorage.getItem('uid')) {
      next('/login')
    }
  } else {
    // 如果匹配到正確跳轉
    next()
  }
})

// 路由報錯
router.onError(error => {
  // 已有路由未配置頁面文件的情況下
  router.push('/building')
})