關於401狀態碼的含義和處理方式

// 引入路由
import router from '@/router'
// 設定響應攔截器
axios.interceptors.response.use(function (response) {
  // 正常響應處理
  return response
}, function (error) {
  // 非正常響應處理(包括401)
  // console.dir(error) // 物件： config request response isAxiosError toJSON
  if (error.response.status === 401) {
    // token失效(token在伺服器端已經失效了，2個小時時效)
    // 強制使用者重新登入系統，以重新整理伺服器端的token時效
    router.push('/login')
    // 不要給做錯誤提示了
    return new Promise(function () {}) // 空的Promise物件，沒有機會執行catch，進而不做錯誤提示了
  }
  // return new Promise((resolve,reject)=>{
  // reject('獲得文章失敗！')
  // })
  return Promise.reject(error)
})

// 響應攔截器 （響應成功：剝離無效資料，響應失敗：重新整理token）
instance.interceptors.response.use(res => {
  // 將來獲取資料：res.data.data 麻煩
  // 想要結果：data 即可
  try {
    return res.data.data
  } catch (e) {
    return res
  }
}, async err => {
  try {
    // 目的：重新整理token
    if (err.response && err.response.status === 401) {
    // 未登入  跳轉登入頁面  阻止程式執行
      const { user } = store.state
      // 如果沒有token沒登入  如果沒有refresh_token無法重新整理token
      if (!user.token || !user.refresh_token) {
        router.push('/login')
        return Promise.reject(err)
      }
      // 重新整理token，發請求，沒有設定的axios，自己設定refresh_token
      const res = await axios({
        url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
        method: 'put',
        headers: {
          Authorization: `Bearer ${user.refresh_token}`
        }
      })
      // token獲取  res.data.data.token
      // 更新 vuex 和 本地 token
      store.commit('setUser', {
        token: res.data.data.token,
        refresh_token: user.refresh_token
      })
      // 繼續傳送剛才錯誤的請求
      // instance({之前錯誤的請求設定})
      // err錯誤物件 包含（response 響應物件 |config 請求設定）
      return instance(err.config)
    }
  } catch (e) { // exception 異常
    // 重新整理token失敗
    router.push('/login')
    return Promise.reject(e)
  }
  return Promise.reject(err)
})

import store from '@/store' // 引入vuex中的store範例
import router from '@/router' // 引入路由物件範例
……
// 響應攔截器
instance.interceptors.response.use(
  function (response) {
    try {
      // 返回具體有價值的業務資料
      return response.data.data
    } catch (error) {
      return response.data
    }
  },
  async function (error) {
    // 響應有錯誤，有可能錯誤狀態碼為401
    if (error.response && error.response.status === 401) {
      // 定義登入路由物件
      let toPath = {
        name: 'login',
        query: { redirectUrl: router.currentRoute.path }
      } // 跳轉物件
      // 如果refresh_token不存在
      if (!store.state.user.refresh_token) {
        router.push(toPath)
        return Promise.reject(error)
      }
      try {
        // 重新整理使用者token
        // 應該傳送一個請求 換取新的token
        // 這裡不應該再用instance  因為 instance會再次進入攔截器  用預設的axios
        let result = await axios({
          method: 'put',
          url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
          headers: {
            Authorization: `Bearer ${store.state.user.refresh_token}`
          }
        })
        // 獲取到新token後，就對vuex和localStorage進行更新
        store.commit('updateUser', {
          token: result.data.data.token, // 拿到新的token之後
          refresh_token: store.state.user.refresh_token // 將之前 refresh_token 14天有效期
        })
        return instance(error.config) // 把剛才錯誤的請求再次傳送出去 然後將promise返回
      } catch (err) {
        // 如果錯誤 表示補救措施也沒用了(有可能refresh_token也失效了)
        // 應該跳轉到登入頁 並且 把廢掉的使用者資訊全都幹掉
        store.commit('clearUser') // 所有的使用者資訊清空
        router.push(toPath) // 跳轉到回登入頁
        return Promise.reject(err)
      }
    }
    return Promise.reject(error)
  }
)
') // 所有的使用者資訊清空
        router.push(toPath) // 跳轉到回登入頁
        return Promise.reject(err)
      }
    }
    return Promise.reject(error)
  }
)