1. 程式人生 > 實用技巧 >Vue token處理(請求攔截器,響應攔截器)

Vue token處理(請求攔截器,響應攔截器)

1.登入成功後,拿到vueX裡的token(本地也儲存過),給請求都新增token
vueX裡的tokenInfo包括token和refresh_token
request.interceptors.request.use(function (config) {
// 在傳送請求之前做些什麼
// token 在 user模組裡
const token = store.state.user.tokenInfo.token
/* 如果token存在的話,給每個請求加上token */
if (token) {
config.headers.Authorization = Bearer ${token}
}
return config
}, function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error)
})

// 處理token
/*

  • 有refresh_token,用refresh_token去請求回新的token
    • 新token請求成功
      • 更新本地token
      • 再發一次請求A
    • 新token請求失敗
      • 清空vuex中的token
      • 攜帶請求地址,跳轉到登陸頁
  • 沒有refresh_token
    • 清空vuex中的token
    • 攜帶請求地址,跳轉到登陸頁 */
      request.interceptors.response.use(function (response) {
      // 對響應資料做點什麼 (成功響應) response 就是成功的響應 res
      return response
      }, async function (error) {
      // 對響應錯誤做點什麼 (失敗響應) 處理401錯誤
      // console.dir(error)
      if (error.response.status === 401) {
      // 獲取 refresh_token, 判斷是否存在, 存在就去重新整理token
      const refreshToken = store.state.user.tokenInfo.refresh_token
      if (refreshToken) {
      try {
      // 獲取新的token
      const res = await axios({
      method: 'put',
      url: '
      http://toutiao-app.itheima.net/v1_0/authorizations
      ',
      // 請求頭中攜帶refresh_token資訊
      headers: {
      Authorization: Bearer ${refreshToken}
      }
      })
      const newToken = res.data.data.token
      // 將新token更新到vuex中
      store.commit('user/setTokenInfo', {
      refresh_token: refreshToken,
      token: newToken
      })
      // 重新發送頁面請求, 攜帶的是token
      return request(error.config)
      } catch (error) {
      // 說明, 有refresh_token, 但是refresh_token也失效了 (登入失效了)
      // 先清除無效的token (vuex)
      store.commit('user/removeTokenInfo')
      Toast.fail('登入已過期, 請重新登入')
      router.push({
      path: '/login',
      query: {
      backTo: router.currentRoute.fullPath
      }
      })
      }
      } else {
      // 沒有refreshToken, 直接去登入, 將來還能跳回來
      // router.currentRoute 指向當前路由資訊物件 === 等價於之前頁面中用的 this.$route
      // 清除本地token, 跳轉登入 (無意義的本地token內容, 要清除)
      store.commit('removeToken')
      router.push({
      path: '/login',
      query: {
      // currentRoute當前路由
      backto: router.currentRoute.fullPath
      }
      })
      }
      }
      // 對響應錯誤做點什麼
      // return new Promise(function (resolve, reject) {
      // reject(error)
      return Promise.reject(error)
      })