はじめに
先日、SPAのWebアプリを開発している最中に、アクセストークンの有効期限は短く保ちつつ、リフレッシュトークンを用いてアクセストークンの再取得を行うことでユーザービリティを向上させる対応を行いました。
しかし、この処理を自前で実装しようとすると、複数同時リクエストの考慮が必要だったり、フラグでトークン取得中か否かを判定しなきゃいけないで結構面倒でした。
そんな時に便利だったaxios-auth-refreshを紹介します。
axios-auth-refreshとは
axios-auth-refreshは、このトークンの自動リフレッシュを簡単に実装するためのヘルパーライブラリです。
トークンが有効期限切れであることを検知すると、自動的にトークンをリフレッシュしてからリクエストを再試行することができます。
使い方
使い方は簡単でaxiosのinterceptersみたいな感じでトークン再取得処理を渡すだけです。
import axios from 'axios';
import createAuthRefreshInterceptor from 'axios-auth-refresh';
// リフレッシュトークンの取得と設定を行うメソッド
async function const refreshAuthLogic = () =>
axios.post('https://www.example.com/auth/token/refresh').then((tokenRefreshResponse) => {
localStorage.setItem('token', tokenRefreshResponse.data.token);
failedRequest.response.config.headers['Authorization'] = 'Bearer ' + tokenRefreshResponse.data.token;
return Promise.resolve();
});
// interceptorに設定する
createAuthRefreshInterceptor(axios, refreshAuthLogic);
これでトークンの有効期限が切れている場合はrefreshAuthLogicが実行され、トークンを再取得した後に新しいトークンで元のリクエストを再度投げてくれます。