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'
  }
})

이를 위해 인터셉터 를 사용했습니다. 요청의 기본 URL이 내 API인 경우 인증 헤더를 추가합니다(자격 증명을 제3자에게 보내는 것을 방지하기 위해). 이것은 각 요청에서 실행되므로 토큰이 변경되면(예: 토큰 새로 고침의 결과로) 다음 요청에서 새 토큰을 선택합니다. 또한 어떤 이유로든 필요한 경우 호출 사이트에서 헤더를 재정의할 수 있도록 요청에서 기존 값을 확인합니다.

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 "class"

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)
    })

btw, 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);
  }
);

이를 위해 인터셉터 를 사용했습니다. 요청의 기본 URL이 내 API인 경우 인증 헤더를 추가합니다(자격 증명을 제3자에게 보내는 것을 방지하기 위해). 이것은 각 요청에서 실행되므로 토큰이 변경되면(예: 토큰 새로 고침의 결과로) 다음 요청에서 새 토큰을 선택합니다. 또한 어떤 이유로든 필요한 경우 호출 사이트에서 헤더를 재정의할 수 있도록 요청에서 기존 값을 확인합니다.

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)
);

인터셉터는 가장 우아한 솔루션처럼 보입니다.