const myRouter = new VueRouter({
 routes: [{
        path: '/login',
        name: 'login',
        meta: {
         roles: ['admin', 'user']
        },
        component: () => import('@/components/Login')
    },{
        path: '/home',
        name: 'home',
        meta: {
            roles: ['admin']
        },
        component: () => import('@/views/Home')
    },{
     path: '/404',
     component: () => import('@/components/404')
   }]
})

//假設(shè)通過(guò)接口從后臺(tái)獲取的用戶角色，可以存儲(chǔ)在token中
const role = 'user'

myRouter.beforeEach((to,from,next)=>{
 if(to.meta.roles.includes(role)){
  next() //放行
 }else{
  next({path:"/404"}) //跳到404頁(yè)面
 }
})

const myRouter = new VueRouter({
 routes: [{
        path: '/login',
        name: 'login',
        meta: {
         title: '登錄頁(yè)'
         icon: 'login'
        },
        component: () => import('@/components/Login')
    },{
        path: '/home',
        name: 'home',
        meta: {
         title: '首頁(yè)'
         icon: 'home',
         requireAuth: true
        },
        component: () => import('@/views/Home')
    },{
     path: '/404',
     component: () => import('@/components/404')
   }]
})

myRouter.beforeEach((to,from,next)=>{
 let flag = to.matched.some(record=>record.meta.requireAuth);
 //這里使用matched循環(huán)查找不直接使用to.meta的原因：
 //當(dāng)存在子路由的情況時(shí)，首先明確按正常點(diǎn)擊邏輯來(lái)說(shuō)是先走一級(jí)路由再進(jìn)二級(jí)路由的，對(duì)于權(quán)限的判斷也必然是這樣
 //to.meta => 會(huì)直接搜索子路由的meta，如果一級(jí)路由沒(méi)有添加requireAuth:true， 則在一級(jí)路由頁(yè)面也本就應(yīng)該被攔截?zé)o法進(jìn)入二級(jí)路由頁(yè)面了；如果用戶直接篡改url地址欄的話，則可以進(jìn)入二級(jí)頁(yè)面，權(quán)限可能會(huì)出現(xiàn)問(wèn)題。則應(yīng)該給該權(quán)限下面的路由都添加標(biāo)記
 //to.matched => matched是一個(gè)路由數(shù)組，會(huì)將所有路由包括子路由的屬性集合起來(lái)，所以通過(guò)循環(huán)判斷查找的方式，只需要給一級(jí)路由添加權(quán)限標(biāo)識(shí)即可權(quán)限他下面的其他子路由。
 if(flag){
  next()
 }else{
  next({path:"/404"})
 }
})

// store.js
// 將需要?jiǎng)討B(tài)注冊(cè)的路由提取到vuex中
const dynamicRoutes = [
  {
    path: '/manage',
    name: 'Manage',
    meta: {
      requireAuth: true
    },
    component: () => import('./views/Manage')
  },
  {
    path: '/userCenter',
    name: 'UserCenter',
    meta: {
      requireAuth: true
    },
    component: () => import('./views/UserCenter')
  }
]

// store.js
setUserInfo (state, userInfo) {
  state.userInfo = userInfo
  state.auth = true // 獲取到用戶信息的同時(shí)將auth標(biāo)記為true，當(dāng)然也可以直接判斷userInfo
  // 生成用戶路由表
  state.userRoutes = dynamicRoutes.filter(route => {
    return userInfo.menus.some(menu => menu.name === route.name)
  })
  router.addRoutes(state.userRoutes) // 注冊(cè)路由
}

// App.vue
<div id="nav">
   <router-link to="/">主頁(yè)</router-link>
   <router-link to="/login">登錄</router-link>
   <template v-for="(menu, index) of $store.state.userInfo.menus">
     <router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link>
   </template>
</div>