ホームページ > ウェブフロントエンド > jsチュートリアル > Axios Intercepters でリフレッシュ トークンを自動化しましょう!

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

DDD
リリース: 2024-10-23 06:27:29
オリジナル
917 人が閲覧しました

Automate Refresh Tokens with 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 サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート