Axios 인터셉터로 새로 고침 토큰을 자동화하세요!

문제

얼마 전 저는 Salesforce API와 상호 작용하고 내 개체에 대해 CRUD 작업을 수행하는 작은 프로젝트를 진행하고 있었습니다. 저는 React.js를 사용하고 있었습니다(백엔드 설정 없이 정적 프런트엔드만 있음). 그런데 API 작업을 하다가 문제가 생겼습니다. OAuth 메소드를 사용하여 생성한 액세스 토큰은 24시간 동안만 유효합니다! 즉, 애플리케이션을 새로 고칠 때마다 OAuth API 호출을 통해 새 토큰을 수동으로 생성해야 합니다.

내 애플리케이션이 만료되지 않은 토큰을 새로 고치기 위해 Salesforce OAuth에 불필요한 API 호출을 수행하는 방식이 마음에 들지 않습니다. 이를 극복하기 위해 코드에 다음 논리를 구현하고 싶습니다.

axios.get('https://www.someapi.com/fetch-data').then((data)=> {
// doing something with the Data
},{}).catch((error)=> {
    if(error.response.statusCode === 401){
        // If Token Expired
        RefreshToken()
        window.alert("Session Expired Please Reload the Window!")
    }
})

내 논리는 기본적으로 다음과 같습니다. API 엔드포인트에서 401 응답이 있는 경우 새로 고침 토큰 API 호출을 수행하고 새 토큰을 로컬 저장소에 저장한 다음 새로 생성된 토큰을 사용하려면 사용자에게 페이지를 다시 로드하라는 메시지를 표시합니다. 후속 API 호출을 위해. 그러나 이 접근 방식에서는 사용자 경험을 개선하고 불필요한 중단을 피하기 위해 자동화할 수 있는 추가 작업을 사용자가 수행해야 합니다.

Axios 인터셉터 사용

실제로 살펴보겠습니다

axios.interceptors.response.use(
  (response) => response,
  async function (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        })
          .then((token) => {
            originalRequest.headers["Authorization"] = "Bearer " + token;
            return axios(originalRequest);
          })
          .catch((err) => {
            return Promise.reject(err);
          });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      return new Promise((resolve, reject) => {
        initiateNewAccessTokenApi()
          .then((token) => {
            axios.defaults.headers.common["Authorization"] = "Bearer " + token;
            originalRequest.headers["Authorization"] = "Bearer " + token;
            processQueue(null, token);
            resolve(axios(originalRequest));
          })
          .catch((err) => {
            processQueue(err, null);
            reject(err);
          })
          .finally(() => {
            isRefreshing = false;
          });
      });
    }

    return Promise.reject(error);
  }
);

코드 설명

내가 한 일은 Axios가 보내는 모든 요청에 ​​미들웨어를 연결하여 401 HTTP 상태 코드와 함께 응답이 돌아오는지 확인하는 것이었습니다. 그렇다면 새로 고침 토큰 API를 호출하여 액세스 토큰을 다시 시작하고 새 토큰을 로컬 저장소에 저장한 다음 거부된 모든 이전 API 호출을 자동으로 다시 트리거합니다. 그게 다야! 더 이상 사용자에게 '창을 다시 로드하세요!'라고 묻지 마세요. ?

이 내용이 귀하의 작업에 도움이 되기를 바랍니다!

위 내용은 Axios 인터셉터로 새로 고침 토큰을 자동화하세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!