Top header xs

axiosのヘッダーにtokenを埋め込んで常時使えるようにする

axiosを使っていて、リクエストのヘッダーに常時トークンを保持させたい時があるのでその時の便利な設定ファイルを書きました。

axiosはこちら

axios/axios

Promise based HTTP client for the browser and node.js

どのような時有効か

例えば、React Native⇄Railsでアプリを作っていて、ログインユーザーの認証はトークンベースで行う時。(Railsでdevise token auth使ってたりする時)
この場合ログインユーザーがサーバ側にリクエストをする時ヘッダーにトークンを持たせると思います。

デフォルトのaxiosをそのまま使えば毎回のリクエストのヘッダーに埋め込む必要があるのでこれを常時埋め込んだ状態にしてそれを使おうって話。

interceptorsを使う

コードはこちら。

//axios.js

import axios from "axios";
import authTokens from "./authTokens";

const instance = axios.create({
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  }
});

instance.interceptors.request.use(
  config => {
    return authTokens().then(tokens => {
      if (tokens) {
        config.headers.common["access-token"] = tokens["access-token"];
        config.headers.common["uid"] = tokens["uid"];
        config.headers.common["client"] = tokens["client"];
      }
      return config;
    });
  },
  error => {
    return Promise.reject(error);
  }
);

export default instance;

少し解説すると、application/jsonのaxiosを生成。instance.interceptors.request.useを用いてヘッダーに埋め込みます。
こちらではauthTokens を読み込んでそちらを展開、該当のトークンがあればそれを config.headers.common でヘッダーに入れてます。

今回はReactNativeでのケースになるので以下のauthTokens.jsを使います。
ログイン時にAsyncStorageに格納するtokenをgetItemするやつ。

//authTokens.js

import { AsyncStorage } from "react-native";

const authTokens = async () => {
  try {
    const tokens = await AsyncStorage.getItem("auth_header");
    const parsedTokens = JSON.parse(tokens);
    return parsedTokens;
  } catch (error) {
    return null;
  }
};

export default authTokens;

AsyncStorage · React Native

`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

The AsyncStorage JavaScript code is a simple facade that provides a clear JavaScript API, real Error objects, and simple non-multi functions. Each method in the API returns a Promise object.

とある通り、AsyncStorageはPromiseオブジェクトをreturnします。

axios.js

authTokens().then(tokens =>

という感じで展開してます。

使い方

import axios from "./axios";
const ENDPOINT = "https://hoge.com/api/v1/foo"

axios.get(ENDPOINT).then(res =>
  ~~

普通にaxiosを使う時と同じように、リクエストを送る時は上で作ったaxios.jsを読み込んで使います。

About Me

Profile image

hirozak

エンジニア

音楽, 映画, 海外ドラマ, ガジェット, インテリア, お酒が好きです。

詳しく見る

This Blog

このブログはhirozakがRuby on Railsで開発しました。

GitHubにて、ソースコードを公開しています。