어떻게 액시오스 요격기를 사용할 수 있습니까?

어떻게 액시오스 요격기를 사용할 수 있습니까?

액시오스 문서를 보긴 했지만, 그 문서에 나오는 건

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

또한 많은 튜토리얼에서 이 코드만 보여주지만 무엇에 사용되는지 혼란스럽습니다. 누가 따라 할 간단한 예를 들어주실 수 있나요?

간단히 말하면, 그것은 모든 HTTP 작업에 대한 체크포인트에 가깝습니다.모든 API 호출은 이 인터셉터를 통해 전달됩니다.

그럼 왜 요격기 두 대죠?

API 호출은 요청과 응답 두 개의 반으로 구성됩니다.체크포인트처럼 동작하기 때문에 요청과 응답에는 별도의 인터셉터가 있습니다.

일부 요청 가로채기 사용 사례 -

요청하기 전에 자격 증명이 유효한지 확인해야 한다고 가정합니다.따라서 실제로 API 호출을 하는 대신 인터셉트 레벨에서 자격 증명이 유효한지 확인할 수 있습니다.

Axios 호출 때마다 토큰 추가 로직을 복제하는 대신, 요청할 때마다 토큰을 첨부하는 인터셉터를 만들 수 있습니다.

일부 응답 가로채기 사용 사례 -

응답을 받았다고 가정하고, 사용자가 로그인한 것으로 추론하고자 하는 API 응답으로 판단합니다.따라서 응답 인터셉터에서는 사용자 로그인 상태를 처리하는 클래스를 초기화하고 수신한 응답 개체에 맞게 업데이트할 수 있습니다.

유효한 API 자격 증명을 가진 일부 API를 요청했지만 데이터에 액세스할 수 있는 유효한 역할이 없다고 가정합니다.따라서 응답 인터셉터에서 사용자가 허용되지 않음을 알리는 경고를 트리거할 수 있습니다.이렇게 하면 Axios에서 요청한 모든 Axios에 대해 수행해야 하는 권한 없는 API 오류 처리로부터 보호받을 수 있습니다.

다음은 몇 가지 코드 예시입니다.

요청 인터셉터

• (이 경우 환경 변수를 확인하여) 다음과 같이 함으로써 (필요한 경우) axios의 구성 개체를 인쇄할 수 있습니다.

  const DEBUG = process.env.NODE_ENV === "development";
  
  axios.interceptors.request.use((config) => {
      /** In dev, intercepts request and logs it into console for dev */
      if (DEBUG) { console.info("✉️ ", config); }
      return config;
  }, (error) => {
      if (DEBUG) { console.error("✉️ ", error); }
      return Promise.reject(error);
  });
  

• 전달 중인 헤더를 확인하거나 일반 헤더를 추가하려면 다음에서 사용할 수 있습니다.config.headers물건. 예를 들어:예를 들어,

  axios.interceptors.request.use((config) => {
      config.headers.genericKey = "someGenericValue";
      return config;
  }, (error) => {
      return Promise.reject(error);
  });
  

• 에는일 .GET할 쿼리 합니다에서 수 . 전송되는 쿼리 매개 변수는config.params물건.

응답 인터셉터

• 인터셉터 레벨에서 API 응답을 선택적으로 파싱하고 원래 응답 대신 파싱된 응답을 전달할 수도 있습니다.API를 여러 곳에서 동일한 방식으로 사용할 경우 파싱 로직 작성 시간을 몇 번이고 절약할 수 있습니다.한 가지 방법은 에 추가 파라미터를 전달하는 것입니다.api-request그리고 응답 인터셉터에서 동일한 파라미터를 사용하여 작업을 수행합니다.예를 들어,

  //Assume we pass an extra parameter "parse: true" 
  axios.get("/city-list", { parse: true });
  

  일단 응답 인터셉터에서 다음과 같이 사용할 수 있습니다.

  axios.interceptors.response.use((response) => {
      if (response.config.parse) {
          //perform the manipulation here and change the response object
      }
      return response;
  }, (error) => {
      return Promise.reject(error.message);
  });
  

  그래서 이 경우에는, 언제든지,parse반대하다, 반대하다, 반대하다, 반대하다, 반대하다, 반대하다, 반대.response.config, 조작은 끝났지만 나머지 사건들은 그대로 될 겁니다

• 도착하는 모습까지 볼 수 있습니다.HTTP코드를 작성한 다음 결정을 내립니다.예를 들어,

  axios.interceptors.response.use((response) => {
      if(response.status === 401) {
           alert("You are not authorized");
      }
      return response;
  }, (error) => {
      if (error.response && error.response.data) {
          return Promise.reject(error.response.data);
      }
      return Promise.reject(error.message);
  });
  

예를 들어, 요청이 전송된 순간부터 응답을 수신한 순간까지 걸리는 시간을 파악하려면 다음 코드를 사용할 수 있습니다.

const axios = require("axios");

(async () => {
  axios.interceptors.request.use(
    function (req) {
      req.time = { startTime: new Date() };
      return req;
    },
    (err) => {
      return Promise.reject(err);
    }
  );

  axios.interceptors.response.use(
    function (res) {
      res.config.time.endTime = new Date();
      res.duration =
        res.config.time.endTime - res.config.time.startTime;
      return res;
    },
    (err) => {
      return Promise.reject(err);
    }
  );

  axios
    .get("http://localhost:3000")
    .then((res) => {
      console.log(res.duration)
    })
    .catch((err) => {
      console.log(err);
    });
})();

이는 미들웨어와 같은 것으로, 기본적으로 모든 요청(GET, POST, PUT, DELETE) 또는 모든 응답(서버에서 받는 응답)에 추가됩니다.권한 부여와 관련된 경우에 사용되는 경우가 많습니다.

이것을 보십시오.Axios 인터셉터 및 비동기 로그인

다른 예를 가진 https://medium.com/ @ danielalvidrez/handling-error-responses-with-grace-b6fd3c5886f0에 대한 다른 기사가 있습니다.

예 중 하나의 요점은 인터셉터를 사용하여 권한 부여 토큰이 만료되었는지(예를 들어 403인 경우)를 탐지하고 페이지를 리디렉션할 수 있다는 것입니다.

제가 실제 프로젝트에서 사용했던 실용적인 활용 사례를 알려드리겠습니다.제가 주로 쓰는 건.request interceptor토큰 관련 직원(accessToken,refreshToken), 예를 들어 토큰이 만료되지 않았는지 여부(예: 만료된 경우 새로 고침으로 업데이트합니다.다른 모든 통화를 토큰화하고 해결될 때까지 보류합니다.하지만 제가 가장 좋아하는 것은 악시오스 입니다.response interceptors아래와 같이 앱 글로벌 오류 처리 로직을 배치할 수 있습니다.

httpClient.interceptors.response.use(
  (response: AxiosResponse) => {
    // Any status code that lie within the range of 2xx cause this function to trigger
    return response.data;
  },
  (err: AxiosError) => {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    const status = err.response?.status || 500;
    // we can handle global errors here
    switch (status) {
      // authentication (token related issues)
      case 401: {
        return Promise.reject(new APIError(err.message, 409));
      }

      // forbidden (permission related issues)
      case 403: {
        return Promise.reject(new APIError(err.message, 409));
      }

      // bad request
      case 400: {
        return Promise.reject(new APIError(err.message, 400));
      }

      // not found
      case 404: {
        return Promise.reject(new APIError(err.message, 404));
      }

      // conflict
      case 409: {
        return Promise.reject(new APIError(err.message, 409));
      }

      // unprocessable
      case 422: {
        return Promise.reject(new APIError(err.message, 422));
      }

      // generic api error (server related) unexpected
      default: {
        return Promise.reject(new APIError(err.message, 500));
      }
    }
  }
);

이거 어때요?새 Axios 인스턴스를 만들고 여기에 인터셉터를 연결합니다.그러면 당신은 당신의 앱 어디에서나 그 인터셉터를 사용할 수 있습니다.

export const axiosAuth = axios.create()

//we intercept every requests 
axiosAuth.interceptors.request.use(async function(config){
    //anything you want to attach to the requests such as token 
    return config;
}, error => {
    return Promise.reject(error)
})


//we intercept every response
axiosAuth.interceptors.response.use(async function(config){
    
    return config;
}, error => {
//check for authentication or anything like that
    return Promise.reject(error)
})

그럼 당신이 사용합니다.axiosAuth당신이 사용하는 것과 같은 방식axios

이것이 내 프로젝트에서 내가 하던 방식입니다.코드 스니펫은 axios 인터셉터에서 액세스 및 리프레쉬 토큰을 사용하는 방법을 나타내며 리프레쉬 토큰 기능을 구현하는 데 도움이 됩니다.

const API_URL =
    process.env.NODE_ENV === 'development'
        ? 'http://localhost:8080/admin/api'
        : '/admin-app/admin/api';

const Service = axios.create({
    baseURL: API_URL,
    headers: {
        Accept: 'application/json',
    },
});

Service.interceptors.request.use(
    config => {
        const accessToken = localStorage.getItem('accessToken');
        if (accessToken) {
            config.headers.common = { Authorization: `Bearer ${accessToken}` };
        }
        return config;
    },
    error => {
        Promise.reject(error.response || error.message);
    }
);

Service.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        let originalRequest = error.config;
        let refreshToken = localStorage.getItem('refreshToken');
        const username = EmailDecoder(); // decode email from jwt token subject
        if (
            refreshToken &&
            error.response.status === 403 &&
            !originalRequest._retry &&
            username
        ) {
            originalRequest._retry = true;
            return axios
                .post(`${API_URL}/authentication/refresh`, {
                    refreshToken: refreshToken,
                    username,
                })
                .then(res => {
                    if (res.status === 200) {
                        localStorage.setItem(
                            'accessToken',
                            res.data.accessToken
                        );
                        localStorage.setItem(
                            'refreshToken',
                            res.data.refreshToken
                        );

                        originalRequest.headers[
                            'Authorization'
                        ] = `Bearer ${res.data.accessToken}`;

                        return axios(originalRequest);
                    }
                })
                .catch(() => {
                    localStorage.clear();
                    location.reload();
                });
        }
        return Promise.reject(error.response || error.message);
    }
);

export default Service;

저는 다음과 같은 방법으로 구현하였습니다.

httpConfig.js

import axios from 'axios'
import { baseURL } from '../utils/config'
import { SetupInterceptors } from './SetupInterceptors'


const http = axios.create({
    baseURL: baseURL
})

SetupInterceptors(http)

export default http

설정Intercepters.js

import { baseURL } from '../utils/config'


export const SetupInterceptors = http => {

    http.interceptors.request.use(
        config => {
            config.headers['token'] = `${localStorage.getItem('token')}`
            config.headers['content-type'] = 'application/json'
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )

    http.interceptors.response.use(function(response) {
        return response
    }, function (error) {
        const status = error?.response?.status || 0
        const resBaseURL = error?.response?.config?.baseURL
        if (resBaseURL === baseURL && status === 401) {
            if (localStorage.getItem('token')) {
                localStorage.clear()
                window.location.assign('/')
                return Promise.reject(error)
            } else {
                return Promise.reject(error)
            }
        }
        return Promise.reject(error)
    })
}

export default SetupInterceptors

참조 : 링크

언급URL : https://stackoverflow.com/questions/52737078/how-can-you-use-axios-interceptors