🤔 발생 상황
- 사용자가 메인 화면에서의 앨범 선택을 통해
AlbumMainPage로 접근하지 않고, URL을 통한 접근을 하게 된다면 어떻게 대응 할 것인가요?
👀 원인 파악(예상)
- 백엔드
- API 상에서는
token을 통해서 예외처리를 하고 있습니다.
status code 400
{
"message": "NOT_EXIST_PARTICIPANT",
"serverDateTime": "2021-12-14T01:57:28.75725"
}
- 프론트엔드
- 이러한 예외처리를 하기 위해서는,
URL에 접속해서 API 호출까지 이루어진 상태에서 다시 Redirect를 해야 하는 번거로움과 플로우가 알맞지 않습니다. - 그래서 별 개의 방식이 필요했고 백둥이(
)에게 요청했습니다. 로그인 한 유저 정보와 접속하려는 앨범 ID를 통해서 소속 여부를 확인하는 API를 통해 검증하게 됩니다.
✔ 해결 과정
- Router 측에서 이동과 동시에 바로 Checker하는 방식을 선택했습니다.
- 기존 사용하던
AuthRoute 와 같은 방식으로 추가 인증 Route를 구성합니다.
import React from 'react';
import { useAuth } from '@hooks';
import { Navigate, Outlet } from 'react-router-dom';
const AuthRoute = () => {
const token = useAuth();
return token ? <Outlet /> : <Navigate to="/login" />;
};
export default AuthRoute;
✨ Reference