Axios: リクエストごとに認証ヘッダーを更新しますか？

渡されたヘッダーがすべてのリクエストに対して遅延評価されると便利な同様のユースケースがあります。

考え：
ヘッダーハッシュをオブジェクトとして熱心に渡す代わりに（ axios.create({headers: {...}}) axios.create({headers: () => {...}} ）、リクエストが送信される前に評価されるヘッダー（

どう思いますか？
編集：これは提案です、私はこれが今のところうまくいくとは思いません。

私は同じユースケースに遭遇しました。 短期的にはtransformRequest関数を使用することになりました。 間違いなくハックであり、コードベースへの適切な遅延読み込みアプローチの実装を支援したいと考えています。

コードスニペットについては、以下を参照してください。 auth()は、利用可能な場合、ログインしたユーザーのトークンを取得します。

let HTTP = axios.create({
  baseURL: baseurl,
  transformRequest: [function (data, headers) {
    headers['Authorization'] = auth()
    return JSON.stringify(data)
  }],
  headers: {
    'Content-Type': 'application/json'
  }
})

私はこの目的のためにインターセプターを使用

axios.interceptors.request.use(
  config => {
    if (config.baseURL === baseApiAddress && !config.headers.Authorization) {
      const token = getToken();

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

    return config;
  },
  error => Promise.reject(error)
);

@mattstrayer getToken（）メソッドを見せてもらえますか？ トークンをlocalStorageまたはAsyncStorage（React Native）に保存しますか？ 前もって感謝します！

私はこれで終わった。

axios.create({
  baseURL: '<your-api>',
  headers: {
    Authorization: {
      toString () {
        return `Bearer ${localStorage.getItem('token')}`
      }
    }
  }
})

それがどのような場合でも機能するかどうかはわかりません。

私のhttp.jsファイル：

import axios from 'axios';
import {store} from './store';

const http = axios.create ({
  baseURL: process.env.VUE_APP_ROOT_API,
  timeout: 1000,
  headers: {'Content-Type': 'application/json'},
});

http.interceptors.request.use (
  function (config) {
    const token = store.token;
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  function (error) {
    return Promise.reject (error);
  }
);

export default http;

私の店、簡単なget / set「クラス」

export const store = {
    _username: '',
    _email: '',
    _token: '',

    isLogged () {
      return this.token
    },

    set username (str) {
      this._username = str
      localStorage.setItem('username',str)
    },
    get username () {
      return this._username || localStorage.getItem('username')
    },

    set email (str) {
      this._email = str
      localStorage.setItem('email',str)
    },
    get email () {
      return this._email || localStorage.getItem('email')
    },

    set token (str) {
      this._token = str
      localStorage.setItem('token',str)
    },
    get token () {
      return this._token || localStorage.getItem('token')
    }

  }

私のユーザーサービス「クラス」：

import http from './http'

export const user = {
  ping: () => http.get('/users/ping'),
  save: (user) => http.post('/users', user)
}

そして最後に、私の実装：

import {user} from '@/services'

 user.ping().then( r => {
      console.log(r.data)
    })

ところで、 process.env.VUE_APP_ROOT_APIと@/servicesはVueのものです...

結果：

@danielschmitzその例に感謝します!!

みんながこれを理解していて、バグではないように見えるので、これを締めくくります🙂

API呼び出しがトリガーされる前にトークンが設定されていることを確認するために、インターセプターをasync / awaitでラップすると便利であることがわかりました。

http.interceptors.request.use (
  async (config) => {
    const token = await getToken(); // slightly longer running function than example above
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject (error);
  }
);

私はこの目的のためにインターセプターを使用

axios.interceptors.request.use(
  config => {
    if (config.baseURL === baseApiAddress && !config.headers.Authorization) {
      const token = getToken();

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

    return config;
  },
  error => Promise.reject(error)
);

インターセプターは最もエレガントなソリューションのようです