vuex-oidc를 사용하여 axios 기본 헤더에서 'access_token'을 설정하고 현재 상태를 유지하는 방법 및 위치

vuex-oidc를 사용하여 axios 기본 헤더에서 'access_token'을 설정하고 현재 상태를 유지하는 방법 및 위치

API에 액세스하려면 API 클라이언트의 기본 헤더에 현재 JWT 토큰을 추가해야 한다.oidcStore 모듈에는 가져올 API가 있다.access_token, 그렇다.oidcAccessToken겟터터지다

그래서 내 질문은 이걸 어떻게 부를까 하는 것이다.oidcAccessToken안으로 들어가다.userLoaded이벤트 콜백?혹시 이 헤더를 설정하는 데 더 좋은 곳이 있을까?access_token 변경을 처리하는 이벤트가 있는가?

고마워!

// In my `store/index.js`

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    oidcStore: vuexOidcCreateStoreModule(
      oidcSettings,
      {
        namespaced: true
      },
      {
        userLoaded(user) {
           // set access_token
          axios.defaults.headers.common['Auth-Token'] = ... ;
        },
        userUnloaded() {
           // delete access_token
           axios.defaults.headers.common['Auth-Token'] = null;
        }
      }
    )
  }
});

도서관 설립자의 회신에 따르면 https://github.com/perarnborg/vuex-oidc/issues/153

이것을 하는 좋은 방법은 단순히 사용하는 것이다.

        userLoaded(user) {
           // set access_token
          axios.defaults.headers.common['Auth-Token'] = `Bearer ${user.access_token}`;
        },

공리 요격기를 사용할 수 있다.

인터셉터를 사용하면 요청 또는 응답을 처리하기 전에 인터셉트할 수 있음then또는catch. 문서 확인: https://axios-http.com/docs/interceptors

나는 그것을 다음과 같은 방법으로 실행했다.인main.js파일

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

axios.interceptors.request.use((request) => {
    if (store.state.oidcStore.access_token) {
      request.headers.Authorization = `Bearer ${store.state.oidcStore.access_token}`;
    }
});

교체할 수 있음Authorization와 함께['Auth-Token']네 코드에 맞춰서 말이야

참고:

• Axios 인터셉터는 모든 Axios 네트워크 호출 전 상태를 읽고 요청에 Auth 헤더를 추가한다.

• 기본적으로 다음 값access_token이다null. 이 솔루션을 사용하면 이벤트를 찾아 다른 상태 변수를 관리할 필요가 없다.다음에서 값을 읽어 보십시오.oidcStore그것은 도서관 자체로 관리된다.

  다음은 Vue Devtool에서 oidcStore 상태 변수의 기본값이다.

참조URL: https://stackoverflow.com/questions/65724234/using-vuex-oidc-how-and-where-to-set-access-token-in-axios-default-headers-and