我這邊遇到的大致分以下幾種情況，
1需要登錄后才能訪問；
2登錄用戶分權(quán)限，根據(jù)角色id不同分配不同的菜單路由，比如分管理員和用戶兩種權(quán)限；管理員有更高的菜單權(quán)限
3禁止手動(dòng)輸入path進(jìn)入頁面

第一種情況的處理

登錄成功后后臺(tái)會(huì)返回一個(gè)token存入vuex，當(dāng)token過期或者沒有token時(shí)在頁面請(qǐng)求接口會(huì)返回401狀態(tài)碼，在request封裝文件獲取到后執(zhí)行登出并進(jìn)入登錄界面。

request.interceptors.response.use(
  response => {
    // 錯(cuò)誤統(tǒng)一攔截
    if (parseInt(response.data.status) === 401) {
      store.commit(LOGIN_OUT)
      new Vue().$Message.error({
        content: '登錄已過期，請(qǐng)重新登錄',
        onClose: () => {
          Router.push({
            name: 'index'
          })
        }
      })
      return Promise.reject(response.data.msg)
    }
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

第二種情況的處理

有多種處理方法，我這邊是分配菜單權(quán)限，登錄接口給到的不同角色不同的菜單，并渲染到界面。菜單格式大致如下

menus: [
        {
          name: "dataAnalysis",
          title: "數(shù)據(jù)統(tǒng)計(jì)",
          icon: "md-school",
          id: "0",
          submenu: [
            {
              name: "schoolData",
              title: "學(xué)校數(shù)據(jù)",
              icon: "",
              id: "0",
              path: "/home/analysis/school",
            },
          ],
        },
]

對(duì)于一些重要的界面，要做權(quán)限處理，比如只有管理員可以進(jìn)入的，防止用戶手動(dòng)輸入路由進(jìn)入界面

  beforeRouteEnter(to, from, next) {
    let roleId = store.state.user.user.role_id  //從我存入store的數(shù)據(jù)中獲取當(dāng)前用戶的角色id
    if (roleId != 1) {  //用戶不是管理員，則進(jìn)入404頁面
      next({
        path: "/404",
      }); //跳到404頁面
    }else {
      next(); //放行
    }
  },