[解決済み】axiosのすべてのリクエストにAuthorizationヘッダーを添付する

質問

私は、APIサーバーからトークンを取得するreact/reduxアプリケーションを持っています。ユーザーが認証した後、すべてのaxiosリクエストにそのトークンをAuthorizationヘッダーとして持たせたいのですが、アクションのすべてのリクエストに手動で添付する必要があります。私はreact/reduxのかなり新しいですし、最良のアプローチに確信がありませんし、Googleで質の高いヒットを見つけることができません。

以下は私のreduxのセットアップです。

// actions.js
import axios from 'axios';

export function loginUser(props) {
  const url = `https://api.mydomain.com/login/`;
  const { email, password } = props;
  const request = axios.post(url, { email, password });

  return {
    type: LOGIN_USER,
    payload: request
  };
}

export function fetchPages() {
  /* here is where I'd like the header to be attached automatically if the user
     has logged in */ 
  const request = axios.get(PAGES_URL);

  return {
    type: FETCH_PAGES,
    payload: request
  };
}

// reducers.js
const initialState = {
  isAuthenticated: false,
  token: null
};

export default (state = initialState, action) => {
  switch(action.type) {
    case LOGIN_USER:
      // here is where I believe I should be attaching the header to all axios requests.
      return {
        token: action.payload.data.key,
        isAuthenticated: true
      };
    case LOGOUT_USER:
      // i would remove the header from all axios requests here.
      return initialState;
    default:
      return state;
  }
}

私のトークンはreduxストアの state.session.token .

どうすればいいのか、ちょっと迷っています。私は アクシオスインスタンス をルートディレクトリのファイルに書いて、node_modulesからではなく、それを更新/インポートするのですが、状態が変わったときにヘッダを添付することができません。どんなフィードバックやアイデアでも、とてもありがたいです。

解決方法は？

その実現方法は複数あります。ここでは、最も一般的な2つのアプローチについて説明しました。

1. あなたが使用できるのは アクシオスインターセプター を使用して、あらゆるリクエストを傍受し、認証ヘッダを追加します。

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    const token = store.getState().session.token;
    config.headers.Authorization =  token;

    return config;
});

2. から ドキュメント の axios を見ると、リクエストごとに送信されるデフォルトのヘッダを設定できるメカニズムがあることがわかります。

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

つまり、あなたの場合

axios.defaults.headers.common['Authorization'] = store.getState().session.token;

必要であれば、トークンがストアに存在するときに認可ヘッダーを自ら設定する自己実行可能な関数を作成することもできます。

(function() {
     String token = store.getState().session.token;
     if (token) {
         axios.defaults.headers.common['Authorization'] = token;
     } else {
         axios.defaults.headers.common['Authorization'] = null;
         /*if setting null does not remove `Authorization` header then try     
           delete axios.defaults.headers.common['Authorization'];
         */
     }
})();

これでもう、すべてのリクエストに手動でトークンをアタッチする必要はありません。上記の関数を、毎回実行されることが保証されているファイル ( 例 ルートが含まれるファイル)

お役に立てれば幸いです :)