요청 시 token 만료 시 token 작업 자동 새로 고침

1. 개발 과정에서 우리는 모두 토큰을 접할 수 있다. 토큰의 역할은 무엇일까?주요한 역할은 안전을 위해 사용자가 로그인할 때 서버는 무작위로 시효성 있는 토큰을 생성한다. 사용자의 모든 요청은 토큰을 휴대하고 요청의 합법성을 증명해야 한다. 서버는 토큰을 검증하고 검증을 통과해야만 요청 결과를 되돌려준다.
2.token이 효력을 상실할 때 현재의 사이트는 일반적으로 두 가지 처리를 한다. 하나는 로그인 페이지로 이동하여 사용자가 다시 로그인하여 새로운 token을 얻는 것이다. 다른 하나는 요청이 효력을 상실할 때 사이트가 자동으로 새로운 token을 요청하는 것이다. 두 번째 방식은 앱이 로그인 상태를 유지하는 데 비교적 많이 사용된다.
3. 다음은 주제에 들어갑니다. 저희가 요청한 것은axios입니다. 어떤 요청 방식으로든 token을 갱신하는 원리는 똑같습니다.
//하나의 통일된 요청 함수를 봉인했는데 이것은 중점이 아니다

export default function request(url, options) {
  const token = localStorage.getItem('token');
  const defaultOptions = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
    withCredentials: true,
    url: url,
    baseURL: BASE_URL,
  };
  const newOptions = { ...options, ...defaultOptions };
  return axios.request(newOptions)
    .then(checkStatus)
    .catch(error => console.log(error));
}

//반환 결과를 검사하는 함수를 봉인했습니다. 백그라운드 반환 상태 코드와 ==== 1002는 token의 실효를 나타냅니다.

let isRefreshing = true;
function checkStatus(response) {
 if (response && response.code === 1002) {
  //  token , ， 
  if(isRefreshing){
    refreshTokenRequst()
  }
  isRefreshing = false;
  //  Promise 
   const retryOriginalRequest = new Promise((resolve) => {
        addSubscriber(()=> {
          resolve(request(url, options))
        })
      });
      return retryOriginalRequest;
 }else{
   return response;
 }
}

//token 요청 함수 새로 고침

function refreshTokenRequst(){
  let data;
  const refreshToken = localStorage.getItem('refreshToken');
  data:{
    authorization: 'YXBwYXBpczpaSWxhQUVJdsferTeweERmR1praHk=',
    refreshToken,
  }
  axios.request({
    baseURL: BASE_URL,
    url:'/app/renewal',
    method: 'POST',
    data,
  }).then((response)=>{
    localStorage.setItem('refreshToken',response.data.refreshToken);
    localStorage.setItem('token',response.data.token);
    onAccessTokenFetched();
    isRefreshing = true;
  });
}

//Promise 함수 컬렉션

let subscribers = [];
function onAccessTokenFetched() {
  subscribers.forEach((callback)=>{
    callback();
  })
  subscribers = [];
}

function addSubscriber(callback) {
  subscribers.push(callback)
}

요약:
사실 Token이 효력을 상실하면 자동으로 token을 갱신합니다. 페이지에 요청이 하나만 있을 때 처리하기 쉽지만 만약에 페이지에 여러 개의 요청이 있고 token이 효력을 상실할 수 있습니다. 이것은 약간의 복잡한 처리가 필요합니다. 해결 방식은 주로 Promise 함수로 처리합니다.
모든 token이 효력을 상실한 요청은 Promise 함수 집합에 저장되며, token의 함수를 갱신하는 작업이 끝난 후에야 이 Promise 함수를 대량으로 실행하여 요청 결과를 되돌려줍니다.
또 하나 주의해야 할 것은 토큰을 새로 고치는 스위치 isRefreshing을 설정하는 것입니다. 이것은 중복 요청을 방지하는 데 매우 필요한 것입니다.
상기 요청 시 token이 만료되면 자동으로 token을 갱신하는 작업은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고해 주시고 저희를 많이 사랑해 주시기 바랍니다.