Web プロジェクト開発における 2 つのトークン理由とサンプル コードの分析

'vue' から Vue をインポートします
'axios' から axios をインポートします
'vue-axios' から VueAxios をインポートします
'./token' から { getToken, setToken } をインポートします。
'../router/index.js' からルーターをインポートします。
'vant' から { Toast } をインポートします
Vue.use(VueAxios、axios) を使用します
定数インスタンス = axios.create({
  baseURL: 'ベースURL',
  タイムアウト: 100000
})
// リクエストインターセプターを追加するinstance.interceptors.request.use(
  関数（設定）{
    // トークンを均一に追加する
    getToken() && (config.headers['Authorization'] = `Bearer ${getToken().token}`)
    設定を返す
  },
  関数（エラー）{
    Promise.reject(error) を返します。
  }
）
//レスポンスインターセプターを追加/**
 * 1. 401 の場合は無視* 2. トークンがある場合はログイン ページにジャンプ* 3. try-catch を使用して refresh_token を使用してトークンを取得し、成功した場合は refresh_token が無効な場合はログイン ページにジャンプ* 4. 取得したトークンを保存して更新し、ユーザーの希望する操作を続行*/
インスタンスインターセプターレスポンスの使用(
  関数（応答）{
    応答を返す
  },
  非同期関数（エラー）{
    if (401 === error.response.status) {
      setTimeout('console.clear()', 2000)
      （トークンを取得する）場合{
        試す {
          // ログインしましたが、短い T の有効期限が切れています。長い T を使用して短い T を取得します (ユーザー トークンを更新します)
          res = axios({ を待ちます
            url: 'ベースアドレス/v1_0/authorizations',
            メソッド: 'PUT'、
            ヘッダー:{Authorization: `Bearer ${getToken().refresh_token}`}
          })
          // 短いTを更新
          トークン = getToken() とする
          トークン.トークン = res.data.data.トークン
          setToken(トークン)
          // ユーザー操作を続行します。インスタンス(error.config) を返します。
        } キャッチ（エラー）{
          // Long T が失敗した場合、ログイン ページにジャンプします。Toast.fail('まずログインしてください')
          router.push({ パス: '/login' })
        }
      } それ以外 {
        // ログインしていない場合はログインページに移動します Toast.fail('まずログインしてください')
        router.push({ パス: '/login' })
      }
    }
    Promise.reject(error) を返します。
  }
）
デフォルトインスタンスをエクスポートする