많은 Ajax 요청을 보낼 때 Axios 가로채기 처리

많은 Ajax 요청을 보낼 때 Axios 가로채기 처리

Larave+J 사용WT 및 vue2 + vuex2 + 악리

따라서 사용자가 로그인할 때 vuex 저장소에 인증 토큰을 저장합니다.토큰이 만료되면 새로 고쳐야 합니다.새로 고치려면 다음 주소로 동일한 토큰을 보내야 합니다./refresh새로운 토큰을 얻을 수 있습니다.적어도 그렇게 해서 얻었고 실제로 작동한다.

문제는 인터셉터가 401개의 응답을 포착하여 토큰을 갱신하려고 하는데, 예를 들어 내 컴포넌트에서 만료된 토큰으로 많은 요청을 전송하면 어떻게 됩니까?ajax 요구는 비동기적이기 때문에 인터셉터 코드는 여러 번 실행됩니다.그래서 새로고침 요청이 많이 왔어요.초기 토큰이 갱신되면 유효하다고 간주되지 않습니다.대행 수신기가 잘못된 토큰 서버를 새로 고치려고 하면 오류가 발생하고 로그인 페이지로 리디렉션됩니다.

코드는 다음과 같습니다.

axios.interceptors.response.use((response) => {
  return response;
}, (error) => {
  const originalRequest = error.config;

  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true

    axios.post('auth/refresh').then((response) => {
      let token = response.data.token

      store.dispatch('auth/setAuthToken', token)

      let authorizationHeader = `Bearer ${token}`

      axios.defaults.headers = { 'Authorization': authorizationHeader }
      originalRequest.headers['Authorization'] = authorizationHeader

      return axios(originalRequest)
    }, (error) => {
      store.dispatch('auth/clearAuthInfo')
      router.push({ name: 'login' })
    })
  }

  return Promise.reject(error);
});

토큰을 새로 고치는 방법에 대한 접근 방식을 바꿔야 할 것 같습니다.리더는Auth0그럼 이 문제를 해결하려면 사전에 정기적인 갱신을 권장합니다.

여기 SO의 답변이 있습니다.

토큰 유효기간을 1주로 설정하고 사용자가 웹 응용 프로그램을 열 때마다 및 1시간마다 토큰을 새로 고칩니다.사용자가 일주일 이상 애플리케이션을 열지 않으면 다시 로그인해야 하며, 이는 허용 가능한 웹 애플리케이션 UX입니다.

언급URL : https://stackoverflow.com/questions/43081175/dealing-with-axios-interceptors-when-sending-many-ajax-requests