Vue 路由權限控制，只能從登陸頁面進入

1、設置路由是否需要校驗的闕值：

　　在路由配置上加上 meta 的判斷：

routes: [{
    path: '/',
    name: 'Login',
    component: () => import('@/pages/login/login')
  }, {
    path: '/home',
    name: 'Home',
    meta: {requireAuth: true},
    components: {
      default: () => import('@/pages/home/home')
    }
  }]

2、設置登錄保存狀態：

    let loginstatus = true
    this.$store.commit('setRouting', loginstatus)

    // 在vuex文件中
    loginstatus: sessionStorage.getItem('loginstatus') || false

    setRouting (state, loginstatus) {
      state.loginstatus = loginstatus
      sessionStorage.setItem('loginstatus', loginstatus)
    }    　

　　這里為什么用sessionStorage存儲，而不是localStorage、因為localStorage是永久的存儲，如果用它做判斷條件，失去了做權限的意義。
sessionStorage當頁面關閉后，存儲的數據就會消失，適合用來判斷是否登錄，還有一點，vue項目的是單頁面應用，所以可以使用sessionStorage來實現

3、路由登陸跳轉權限控制：

　　在main.js 中設置路由配置：

// 配置路由權限
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權限
    if (sessionStorage.getItem('loginstatus')) { // 判斷本地是否存在access_token
      next()
    } else {
      // 未登錄,跳轉到登陸頁面，並且帶上 將要去的地址，方便登陸后跳轉。
      next({
        path: '/',
        query:{ referrer: to.fullPath}
      })
    }
  } else {
    next()
  }
})

在除去登錄頁面之外的路由都設置meta，就可以實現只能從登錄頁面登錄了。