axios(vue.js)에서 다이내믹 인증 헤더를 사용하는 방법

axios(vue.js)에서 다이내믹 인증 헤더를 사용하는 방법

API 호출에 크게 의존하는 Vue.js 앱을 만들고 있습니다.나는 전화를 걸기 위해 악시를 사용하고 있다.저는 이것과 비슷한 패턴을 사용하고 있습니다.기본적으로 모든 컴포넌트가 공유하는 서비스를 만들었습니다.다음은 서비스입니다.

//api-client.js

import axios from 'axios'
import store from '../src/store'

let authKey = store.getters.getAuthKey
export default  axios.create({
  withCredentials: false, // This is the default
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    authorization: "Basic "+authKey
  }
})

이제 getter를 사용하여 vuex 스토어의 인증 토큰을 가져와 서비스에서 설정하고 있습니다.

이 서비스는 다음과 같이 이용합니다.

//App.vue
<template>
    <div>
       <!-- some code -->
    </div>
</template>

<script>
import apiClient from "../api-client.js" 
    export default {
        mounted(){
         apiClient.get("#url").then(()={
            // Do Something

         })
      }
    }
</script>

<style lang="scss">

</style>

auth key가 수시로 변경되기 때문에 auth key를 갱신하는 설정이 스토어에 있습니다.설정에 의해 스토어 인증 키가 정상적으로 갱신되지만 api-client.js의 키는 갱신되지 않습니다.한 번만 로드되며 스토어 내의 업데이트는 이 api-client.js에 캐스케이드되지 않습니다.

이 문제를 해결할 수 있는 패턴이 있나요?제안해 주세요.

토큰은 동적이기 때문에 Axios 인스턴스 팩토리 헤더 설정에서 정의할 수 없습니다.이를 글로벌하게 처리하는 가장 좋은 방법은 요청 대행 수신기를 사용하는 것입니다.

//api-client.js

import axios from 'axios'
import store from '../src/store'

const apiClient = axios.create({
    withCredentials: false, // This is the default
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    }
});

apiClient.interceptors.request.use(function (config) {
    // Do something before request is sent
    let authKey = store.getters.getAuthKey
    config.headers["Authorization"] = "Basic " + authKey;
    return config;
});

export default apiClient;

이 방법은 각 요청에 대해 대행 수신 기능이 발생하며 최신 버전을 픽업합니다.authKey;

언급URL : https://stackoverflow.com/questions/57624855/how-to-use-dynamic-auth-header-in-axiosvue-js