[2.0] 로그인 과정의 고민 (라우팅, Axios)

랜딩페이지와 로그인페이지는 토큰 없이도 접근할 수 있어야 하고, 마이페이지와 티켓팅 페이지는 인증이 되어 있는 상태에서만 접근할 수 있어야 한다. 티켓 QR코드 페이지는 인증이 되어 있지 않아도 접근할 수 있도록 했다. 한명이 티켓을 여러장을 사서 '공유하기'를 통해 친구들에게 줄 수 있어야 했기 때문에. 라우팅과 관련된 코드는 다음과 같다.

 

 

라우팅

  return (
    <Routes location={location}>
      <Route path="/" element={<Landing />} />
      <Route element={<Layout />}>
        <Route element={<RefuseAuth />}>
          <Route path="/auth/*" element={<AuthRouter />} />
        </Route>
        <Route element={<RequireAuth />}>
          <Route path="/mypage/*" element={<MypageRouter />} />
          <Route path="/ticketing/*" element={<TicketingRouter />} />
        </Route>
        <Route path="/tickets/:ticketId" element={<TicketQR />} />
        <Route path="/404" element={<NotFound />} />
      </Route>
      <Route path="*" element={<Navigate to="/404" />} />
    </Routes>
  );

문서에서 React-Route-dom 만을 이용해서 접근을 제한하는 방식에 대한 예시가 잘 되어 있어서 참고했다. 1차 프로젝트에서 사용했던 HOC로 만들어 컴포넌트를 인자를 넘기고 걸러서 리턴하는 방식에 비해 훨신 깔끔하고 직관적이어서 좋다.

 

 

RequireAuth.tsx

const RequireAuth = () => {
  const { pathname } = useLocation();
  const setRedirectUri = useSetRecoilState(redirectState);

  const accessToken = localStorage.getItem('accessToken');
  const registerToken = localStorage.getItem('registerToken');
  // undefined or token
  useEffect(() => {
    setRedirectUri(pathname);
  }, []);

  if (accessToken) {
    // 어세스 토큰 있으면 패스
    return <Outlet />;
  } else if (registerToken) {
    // 어세스 토큰 없이 레지스터 토큰만 있으면 회원가입
    return <Navigate replace to="/auth/init" />;
  } else {
    // 둘 다 없으면 로그인..?
    return <Navigate replace to="/auth/login/1" />;
  }
};

export default RequireAuth;

오픈하고 공연날까지 일주일정도 짧게 사용하는 서비스이다 보니 리프레쉬 토큰을 굳이 사용하지 않고 어세스토큰 (이하 AT)만 사용한다.

 

RequireAuth로 감싸진 페이지에 접근할 땐 AT가 있으면 패스하고, 없으면 로그인 페이지로 보낸다. 로그인이 성공했을 때 회원가입까지 완료한 유저일 때는 AT를 리스폰스로 주지만, 회원가입을 하지 않은 첫 1회 로그인일때는 레지스터 토큰을 받는다. 그럴땐 회원가입 페이지로 보내버리자.

 

랜딩페이지에서 '예매하러 가기' 또는 '예매 내역 보기' 를 눌렀을 때 그 목적지를 기억하고 있다가 로그인이 끝난 후에 원래 목적지로 가도록 해야했다. redirectUri라는 상태에 저장해두고 로그인 이후에 해당 값을 가져와 네비게이트 시켜주었다.

 

RefuseAuth.ts

const RefuseAuth = () => {
  const { openModal, closeModal } = useModal();
  const accessToken = localStorage.getItem('accessToken');
  const registerToken = localStorage.getItem('registerToken');
  // undefined or token
  const location = useLocation();
  if (accessToken) {
    // 어세스 토큰 있으면 마이페이지로 되돌려버림
    // 에러처리 로직 (생략)
    return <Navigate replace to="/mypage" />;
  } else if (location.pathname === '/auth/init') {
    // auth/init 접근일때, 레지스터 토큰 있어야만 접근 가능
    if (registerToken) {
      return <Outlet />;
    } else {
      // 에러 처리 로직 (생략)
      return <Navigate replace to="/auth/login/1" />;
    }
  } else {
    // 둘 다 없으면 로그인 페이지로 그냥 패스
    return <Outlet />;
  }
};

export default RefuseAuth;

로그인을 하고 티켓 예매나 마이페이지로 들어왔을때, 뒤로가기를 방지하는 로직이다. 회원가입하는 부분은 레지스터 토큰을 따로 사용하기 때문에 따로 처리를 해주었다. 

 

Axios 설정

export const axiosPublic = axios.create({
  baseURL: BASE_URL,
  headers: { 'Content-Type': 'application/json' },
});

export const axiosPrivate = axios.create({
  baseURL: BASE_URL,
  headers: { 'Content-Type': 'application/json' },
});

AT를 사용하는 axiosPrivate과, 사용하지 않는 axiosPublic 두 개의 인스턴스를 만들어 따로 사용한다.

 

Recoil

const initialState = {
  isAuthenticated: false,
  registerToken: null,
  phoneNumber: null,
  inProcess: false,
};

const getTokenFromLocalStorage = (): IAuthType => {
  const accessToken = localStorage.getItem('accessToken');
  const registerToken = localStorage.getItem('registerToken');
  if (accessToken) {
    // 어세스토큰이 있으면 axios 인스턴스에 커먼 헤더로 집어넣음
    axiosPrivate.defaults.headers.common[
      'Authorization'
    ] = `Bearer ${accessToken}`;

    //새로고침할때마다 토큰으로 유저정보(입금자명, 전화번호) 가져오는 과정 필요
    return {
      ...initialState,
      isAuthenticated: true,
      registerToken,
    };
  } else return { ...initialState, registerToken };
};

export const authState = atom<IAuthType>({
  key: 'auth',
  default: getTokenFromLocalStorage(),
});

리코일에서 authState를 처음 초기화할때 쿠키에 있는 값을 가져와서 default 값으로 사용한다. AT가 있다면 상태에 넣고 axios 인스턴스의 커먼 헤더로 집어 넣는다.

 

인증을 하고 이에 따라 라우팅과 에러처리하는 로직에 대해서 정리를 해보았다. 이 외에 에러가 있는 경우에는 알림 모달을 띄워 사용자에게 전달한다. 리액트 쿼리를 이용해 에러를 공통으로 처리하는 방법과, 프로젝트 내에 다양한 곳에서 사용되는 모달을 띄우는 방법도 차차 정리할 예정이다.