vue token 過期處理

1.登陸成功后儲存token  可以利用 vuex 儲存token 

2.利用路由守衛處理

 

router.beforeEach((to, from, next) => {

 

}）

 

 

3.我們可以判斷進去的路由的名字是不是 login  如果沒有token  或者 跳轉的路徑不是登陸頁面 就跳轉到登陸頁面

如果有token &&  跳轉的是登陸頁面 ，就跳轉到主頁面

 

 

  if (!token && to.name !== LOGIN_PAGE_NAME) {
    // 未登錄且要跳轉的頁面不是登錄頁
    next({
      name: LOGIN_PAGE_NAME // 跳轉到登錄頁
    })
  } else if (!token && to.name === LOGIN_PAGE_NAME) {
    // 未登陸且要跳轉的頁面是登錄頁
    next() // 跳轉
  } else if (token && to.name === LOGIN_PAGE_NAME) {
    // 已登錄且要跳轉的頁面是登錄頁
    next({
      name: homeName // 跳轉到homeName頁
    })
  } else {
    if (store.state.user.hasGetInfo) {
      turnTo(to, store.state.user.access, next)
    } else {
      store.dispatch('getUserInfo').then(user => {
        console.log(token);
        // 拉取用戶信息，通過用戶權限和跳轉的頁面的name來判斷是否有權限訪問;access必須是一個數組，如：['super_admin'] ['super_admin', 'admin']
        turnTo(to, user.access, next)
      }).catch(() => {
        setToken('');
        next({
          name: 'login'
        })
      })
    }
  }