Axios Intercepters でリフレッシュ トークンを自動化しましょう!

問題

少し前、私は Salesforce API と対話し、オブジェクトに対して CRUD 操作を実行する小さなプロジェクトに取り組んでいました。私は React.js を使用していました (バックエンドのセットアップはなく、静的なフロントエンドのみ)。ただし、API の使用中に問題が発生しました。 OAuth メソッドを使用して生成したアクセス トークンは 24 時間のみ有効です。つまり、アプリケーションを更新するたびに、OAuth API 呼び出しを行って新しいトークンを手動で生成する必要があります。

アプリケーションがトークンの有効期限が切れていない場合でも、トークンを更新するために Salesforce OAuth に対して不要な API 呼び出しを行うのが気に入りません。これを克服するために、コードに次のロジックを実装したいと思います:

axios.get('https://www.someapi.com/fetch-data').then((data)=> {
// doing something with the Data
},{}).catch((error)=> {
    if(error.response.statusCode === 401){
        // If Token Expired
        RefreshToken()
        window.alert("Session Expired Please Reload the Window!")
    }
})

私のロジックは基本的に次のとおりです。API エンドポイントから 401 応答があった場合、リフレッシュ トークン API 呼び出しを行い、新しいトークンをローカル ストレージに保存し、新しく生成されたトークンを使用するためにページをリロードするようユーザーに促します。後続の API 呼び出し用。ただし、このアプローチはユーザーが追加のアクションを実行することに依存しており、これを自動化してユーザー エクスペリエンスを向上させ、不必要な中断を避けることができます。

Axios インターセプターの使用

実際に動作を見てみましょう

axios.interceptors.response.use(
  (response) => response,
  async function (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        })
          .then((token) => {
            originalRequest.headers["Authorization"] = "Bearer " + token;
            return axios(originalRequest);
          })
          .catch((err) => {
            return Promise.reject(err);
          });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      return new Promise((resolve, reject) => {
        initiateNewAccessTokenApi()
          .then((token) => {
            axios.defaults.headers.common["Authorization"] = "Bearer " + token;
            originalRequest.headers["Authorization"] = "Bearer " + token;
            processQueue(null, token);
            resolve(axios(originalRequest));
          })
          .catch((err) => {
            processQueue(err, null);
            reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      });
    }

    return Promise.reject(error);
  }
);

コードの説明

私がやったことは、Axios が行うすべてのリクエストにミドルウェアをアタッチし、HTTP ステータス コード 401 で応答が返されるかどうかを確認することでした。存在する場合は、リフレッシュ トークン API を呼び出してアクセス トークンを再度開始し、新しいトークンをローカル ストレージに保存し、拒否された以前の API 呼び出しをすべて自動的に再トリガーします。それでおしまい！ユーザーに「ウィンドウをリロードしてください!」と要求する必要はもうありません?

これがあなたの仕事に役立ち、うまく統合できることを願っています!

以上がAxios Intercepters でリフレッシュ トークンを自動化しましょう!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。