實現這種校驗分幾個步驟 1.設定路由是否需要校驗的閾值 在路由配置加上meta的判斷

  routes: [{
    path: '/',
    name: 'Login',
    component: () => import('@/pages/login/login')
  }, {
    path: '/home',
    name: 'Home',

    meta: {requireAuth: true},

    components: {
      default: () => import('@/pages/home/home'),
      mainheader
 
: MainHeader
    }
  }]

第二步 設定登入儲存狀態

    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來實現 第三步： 路由登入跳轉許可權控制 在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()
  }
})

ok,完成，在除去登入頁面之外的路由都設定meta，就可以實現只能從登入頁面登入了。