인터셉터...공부

export const authApi = axios.create({
  baseURL: "https://moneyfulpublicpolicy.co.kr/",
  headers: {
    "Content-Type": "application/json",
  },
});

authApi.interceptors.request.use(
  (config) => {//요청 전에 실행되는 로직
    if(config.url==="user"){
        const accessToken = localStorage.getItem("access");
        if (accessToken) {
            config.headers["Authorization"] = `Bearer ${accessToken}`;
          }else{
            alert("인증이 필요합니다.");
            return Promise.reject("인증이 필요합니다.");
          }
    }   
    return config;
  },(error)=>{ //요청 인터셉터 에러처리니까 요청 과정에서 발생한 오류처리이다
    return Promise.reject(error);
  }

authApi를 생성한다. axios.create() 메소드 사용하여 authApi라는 엑시오스 인스턴스를 생성한다.
이 인스턴스는 서버와 통신할 때 사용한다. 요청 보내질 기본 url을 설정하고, 헤더는 요청시 사용할 기본 헤더를 설정.

• 기본 URL 설정

• headers에 담을 내용 정의

  요청 인터셉터 설정
  authApi.interceptors.request.use(...)

• 요청 인터셉터에서 요청하는 url이 user인 경우는 로컬스토리지에 있는 accessToken을 헤더에 포함시킨다.
  accessToken이 존재하지 않는다면 인증필요 실패로직 작성!

  서버에 요청을 보낼 때 어떤 로직 추가할래? 이다.

  config 객체에는 axios에서 HTTP요청을 설정하는데 사용되는 다양한 옵션이 포함된다.
  url, method(getpostputdelete등), params, data(요청본문으로 보낼 데이터), headers, timeout(요청 타임아웃),auth(HTTP기본인증 또는 Bearer토큰 인증을 위한 정보) 등이 config객체에 포함됩니다.

  코드에서 config.url이 user이면 어세스토큰 가져와서 있으면, 요청 헤더에 인증 토큰을 추가하고 없으면 사용자에게 인증이 필요함을 알리고 오류 반환한다.

  const commentsAxios = axios.create({
   baseURL: "http://localhost:3001/comments",
   timeout: 1500, //서버로부터 응답을 기다리는 시간 제어1.5초후 응답도착하지 않으면 요청 실패하고 오류 발생!
  });
  commentsAxios.interceptors.request.use(
   async (config) => {
     await authApi.get("user");
  
     return config;
   },
   (error) => {
     return Promise.reject(error);
   }
  );
  commentsAxios.interceptors.response.use(
   (response) => {
     return alert(response);
   },
   (error) => {
     return Promise.reject(error);
   }
  );
  export default commentsAxios;
  
  	```

commentsAxios.interceptors.request.use
commentsAxios에 요청 보내기전 실행할 로직입니다.
여기서는 authApi.get("user")를 호출하여 인증이되어있는가를 확인한다. 위에서 authApi 요청 보내기전에 대한 로직인 인터셉터를 정의했으니까 그 로직이 실행되어 url이 user인가? 예. 어세스토큰 있는가?를 판단해서 그거에 맞게 실행한다.
=====> 위의 요구사항이다.
commentsAxios는 권한이 반드시 필요한 요청이라 가정합니다. 따라서 요청 interceptor를 작성하여 사전에 user의 권한을 파악합니다.