React、Redux、Axios で実現する、ワンランク上のセキュリティ：全リクエストへの認証ヘッダー自動添付

2024-04-02

ReactJS、Redux、Axios における全リクエストへの認証ヘッダー添付

概要

前提条件

ReactJS v16.8 以上
Redux v4 以上
Axios v0.19 以上

手順

例：

const authHeader = {
  Authorization: `Bearer ${token}`
};

Axios インターセプターは、すべての Axios リクエストに対して処理を実行する便利な機能です。認証ヘッダーをすべてのリクエストに自動的に添付するには、リクエストインターセプターを使用します。
```
import axios from 'axios';

const instance = axios.create();

instance.interceptors.request.use((config) => {
  config.headers = {
    ...config.headers,
    ...authHeader,
  };

  return config;
});
```

Redux アクションの更新

Redux を使用している場合は、認証ヘッダーを含むリクエストヘッダーオブジェクトをアクションに渡す必要があります。

const loginUser = (email, password) => {
  return async (dispatch) => {
    const authHeader = {
      Authorization: `Basic ${btoa(`${email}:${password}`)}
    };

    const response = await instance.post('/api/login', {
      headers: authHeader,
    });

    dispatch({
      type: 'LOGIN_SUCCESS',
      payload: response.data,
    });
  };
};

アプリケーション全体の利用

設定した Axios インスタンスは、アプリケーション全体で API リクエストを行う際に使用できます。

import { loginUser } from './actions';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('token');

    if (token) {
      loginUser(token);
      setIsLoggedIn(true);
    }
  }, []);

  return (
    <div>
      {isLoggedIn && <WelcomePage />}
      {!isLoggedIn && <LoginPage />}
    </div>
  );
};

上記の例は、ReactJS、Redux、Axios を使用して、すべての API リクエストに認証ヘッダーを自動的に添付する方法を示しています。具体的な実装は、使用している認証フローやアプリケーションのアーキテクチャによって異なります。

// ファイル: src/utils/axios.js

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com/',
});

// リクエストインターセプターで認証ヘッダーを添付
instance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

export default instance;

// ファイル: src/components/App.js

import React, { useState } from 'react';
import { loginUser } from './actions';
import axios from '../utils/axios';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('token');

    if (token) {
      loginUser(token);
      setIsLoggedIn(true);
    }
  }, []);

  const handleLogin = async (email, password) => {
    const response = await axios.post('/api/login', {
      email,
      password,
    });

    const token = response.data.token;

    localStorage.setItem('token', token);
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn && <WelcomePage />}
      {!isLoggedIn && <LoginPage onLogin={handleLogin} />}
    </div>
  );
};

export default App;

// ファイル: src/actions/auth.js

export const loginUser = (token) => {
  return {
    type: 'LOGIN_SUCCESS',
    payload: token,
  };
};

このコードは、以下の機能を実装しています。

axios.js ファイル:
- baseURL を設定
App.js ファイル:
- useState Hook で isLoggedIn 状態を管理
- useEffect Hook で localStorage からトークンを取得し、ログイン状態を更新
- handleLogin 関数でログイン処理を行い、axios を使用して API リクエスト
auth.js ファイル:

このサンプルコードは、認証ヘッダーを添付するための基本的なテンプレートとして使用できます。実際のアプリケーションでは、認証フローやアプリケーションのアーキテクチャに合わせてコードを修正する必要があります。

認証フローの例

JWT トークン:
- ログイン時に JWT トークンを取得し、localStorage に保存
OAuth:
- OAuth プロバイダーを使用してログイン
- アクセストークンとリフレッシュトークンを取得
- アクセストークンが期限切れの場合は、リフレッシュトークンを使用して新しいアクセストークンを取得

アプリケーションアーキテクチャ

Redux:
- Redux を使用してアプリケーション全体の認証状態を管理
- connect HOC を使用してコンポーネントに認証状態を注入

認証ヘッダーを添付するその他の方法

Axios インスタンスごとにヘッダーを設定する

const instance = axios.create({
  headers: {
    Authorization: `Bearer ${token}`
  },
});

instance.get('/api/user');

リクエストごとにヘッダーを設定する

axios.get('/api/user', {
  headers: {
    Authorization: `Bearer ${token}`
  },
});

この方法は、個々のリクエストに異なる認証ヘッダーを設定する場合に便利です。

Higher-Order Component (HOC) を使用する

const withAuth = (Component) => {
  return (props) => {
    const token = localStorage.getItem('token');

    return (
      <Component
        {...props}
        headers={{
          Authorization: `Bearer ${token}`
        }}
      />
    );
  };
};

const MyComponent = () => {
  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
};

const AuthComponent = withAuth(MyComponent);

export default AuthComponent;

この方法は、認証ヘッダーを必要とするコンポーネントをラップするために便利です。

カスタム Axios クライアントを作成する

class AuthAxiosClient {
  constructor(token) {
    this.token = token;
  }

  get(url) {
    return axios.get(url, {
      headers: {
        Authorization: `Bearer ${this.token}`
      },
    });
  }

  // ...他のリクエストメソッド
}

const client = new AuthAxiosClient(token);

client.get('/api/user');