axios の interseptors でリクエストの前処理を共通化する

結論

• axios の interceptors を使うことで、リクエストの前処理として Headers の設定などが可能

前提

• 今回は認証ありのプロジェクトで、リクエストに認証用の Bearer Token をセットしたいケースを想定
• Cognito使用したプロジェクト前提のため、 Bearer Token には Cognito から取得した idToken をセット

内容

これまではリクエストごとに Headers をセットしたり、私の場合には APIClient を実装していたのでその中で各 CRUD 処理部分で Headers をセットするなどしていました。

axios の interceptors を用いることでその設定が1箇所で済ませることができるようになりました。

const userApi = axios.create({ baseURL: 'https://example.com/user'})

userApi.interceptors.request.use(async (config) => {
	const idToken = await Auth.currentSession().then((data) => {
		return data.getIdToken().getJwtToken()
	})
	config.headers = {
    authorization: `Bearer ${idToken}`
	 }
  return config
})