React Axios Bearerトークン送信

React.js で Axios を使って Bearer Token を送信する

Bearer Token とは

Bearer Token は、API へのリクエストを認証するために使用されるトークンです。通常、ユーザーがログインすると発行され、そのトークンをヘッダーに含めて API を呼び出すことで、認証されたリクエストを送信できます。

1. Axios をインストールする
   

   npm install axios
   

2. Bearer Token を保存する
   通常、Bearer Token はローカルストレージまたはセッションストレージに保存されます。例えば、ログイン成功時にトークンを保存する関数を定義します。

   import { setItem } from 'local-storage';
   
   function saveToken(token) {
     setItem('bearerToken', token);
   }
   

3. Axios のインスタンスを作成する
   Axios のインスタンスを作成し、デフォルトのヘッダーに Bearer Token を追加します。

   import axios from 'axios';
   
   const instance = axios.create({
     baseURL: 'https://your-api-endpoint',
     headers: {
       Authorization: `Bearer ${getItem('bearerToken')}`
     }
   });
   

4. Axios を使って API を呼び出す
   作成した Axios インスタンスを使って API を呼び出します。Bearer Token が自動的にヘッダーに含まれます。

   instance.get('/protected-resource')
     .then(response => {
       console.log(response.data);
     })
     .catch(error => {
       console.error(error);
     });
   

注意

• API サーバー側でも Bearer Token の検証と認可を実装する必要があります。
• トークンの有効期限を管理し、必要に応じて再発行する必要があります。
• Bearer Token は機密情報であり、適切に保護する必要があります。

npm install axios

Bearer Token を保存する

import { setItem } from 'local-storage';

function saveToken(token) {
  setItem('bearerToken', token);
}

Axios のインスタンスを作成する

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://your-api-endpoint',
  headers: {
    Authorization: `Bearer ${getItem('bearerToken')}`
  }
});

Axios を使って API を呼び出す

instance.get('/protected-resource')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

コード例の説明

• instance.get('/protected-resource'): API を呼び出し、レスポンスを処理します。
• setItem('bearerToken', token): Bearer Token をローカルストレージに保存します。
• npm install axios: Axios ライブラリをインストールします。

フック関数を使用する

React Hooks を使用して、Bearer Token を管理し、Axios のインスタンスを動的に作成することができます。

import { useEffect, useState } from 'react';
import axios from 'axios';

function MyComponent() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    // ログイン処理やトークンの取得
    setToken('your_bearer_token');
  }, []);

  const instance = axios.create({
    baseURL: 'https://your-api-endpoint',
    headers: {
      Authorization: `Bearer ${token}`
    }
  });

  // API 呼び出し
  instance.get('/protected-resource')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });

  return (
    // ...
  );
}

カスタムフックを使用する

Bearer Token の管理を再利用可能なカスタムフックとして定義することができます。

import { useEffect, useState } from 'react';
import axios from 'axios';

function useAxiosWithBearerToken(baseURL) {
  const [token, setToken] = useState(null);

  useEffect(() => {
    // ログイン処理やトークンの取得
    setToken('your_bearer_token');
  }, []);

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

  return instance;
}

function MyComponent() {
  const axiosInstance = useAxiosWithBearerToken('https://your-api-endpoint');

  // API 呼び出し
  axiosInstance.get('/protected-resource')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });

  return (
    // ...
  );
}

Context APIを使用する

Bearer Token をアプリケーション全体で共有するために、Context API を使用することができます。

import React, { createContext, useContext, useEffect, useState } from 'react';
import axios from 'axios';

const AuthContext = createContext();

function    AuthProvider({ children }) {
  const [token, setToken] = useSta   te(null);

  useEffect(() => {
    // ログイン処理やトークンの取得
    setToken('your_bearer_token');
  }, []);

  const value = {
    token,
    setToken
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

function MyComponent() {
  const { token } = useContext(AuthContext);

  const instance = axios.create({
    baseURL: 'https://your-api-endpoint',
    headers: {
      Authorization: `Bearer ${token}`
    }
  });

  // API 呼び出し
  instance.get('/protected-resource')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });

  return (
    // ...
  );
}