[react]Custom axios 만들기(회원/비회원 열람, 사용가능 기능 구분)

우리 애플리케이션은 회원/비회원 모두 사용할 수 있기 때문에 회원이 이용가능한 기능과 비회원이 이용가능한 기능을 구분하여야 했다.

이 때 axios를 Custom하여 header에 토큰이 있는 요청과 그렇지 않은 요청을 구분하여 사용할 수 있다.

 

다른 팀원분이 작성해주신 로직이였는데, 나중에 참고하면 좋을 것 같아 남겨본다. 간단하게 사용 방식을 살펴보자.

회원만 이용 가능한 기능에는 요청헤더에 토큰을 넣는 custom axios를 사용한다.

import axios from "axios";

const instance = axios.create({
  baseURL: "https://matp.o-r.kr/",
  headers: {
    Authorization: `Bearer ${localStorage.getItem("Authorization")}`,
  },
});

export default instance;

 

이제 이 custom axios를 사용해보자.

회원만 이용가능한 기능의 네트워크 요청에는 만들어둔 instance를 사용하고, 비회원도 이용 가능한 기능의 네트워크 요청에는 평소 axios를 사용하던 방식과 동일하게 사용하면 된다.

export const getMatPeopleInfoForUser = async (id: number) => {
  const response = await instance.get(`/members/${id}`);
  return response.data;
};

export const getMatPeople = async (id: number) => {
  const response = await axios.get(`${url}/${id}`);
  return response.data;
};

타 유저의 페이지를 구경하는 경우를 살펴보자. 

비회원, 회원 모두 타 유저의 페이지를 조회할 수 있지만 오직 회원만이 팔로우/언팔로우 기능을 사용할 수 있다.

아래와 같이 각기 다른 네트워크 요청을 통해, 회원인 경우에만 접근 가능한 정보 및 사용 가능 기능과 비회원도 접근 가능한 정보 및 사용 가능 기능을 구분하여 준다.

jwt 토큰이 있는 경우 모든 정보를 GET 해오고, 없는 경우(비회원) 특정 정보만을 GET 해온다(팔로우 관련 정보는 필요 없기 때문).

const [jwtToken, setJwtToken] = useState(false);

 useEffect(() => {
    localStorage.getItem("Authorization")
      ? setJwtToken(true)
      : setJwtToken(false);
  }, []);
  
useEffect(() => {
    if (jwtToken) {
      getMatPeopleInfo();
      getMatPeopleInfoUser();
    } else if (!jwtToken) {
      getMatPeopleInfo();
    }
  }, [followReload, postsReload]);
  
// 비회원
  const { axiosData: getMatPeopleInfo, responseData: matPeople } = useAxios(
    () => getMatPeople(Number(id)),
    [followReload, postsReload],
    false
  );
  
  
// 회원
  const {
    axiosData: getMatPeopleInfoUser,
    responseData: matPeopleUser,
    status,
  } = useAxios(
    () => getMatPeopleInfoForUser(Number(id)),
    [followReload],
    false
  );
  
   const {
    nickname = "",
    profileUrl = "",
    memo = "",
    followers = 0,
    followings = 0,
    postInfos = [],
    pickerGroupInfos = [],
  } = matPeople || {};

// 팔로우 기능은 회원만 이용가능하므로 회원일 경우에 해당하는 네트워크 요청의 응답에서 꺼내 사용
  const { isFollowing = false } = matPeopleUser || {};