/student/:id 리다이렉트 문제

[hmlinnie]

안녕하세요! 스펙 AR-02, AR-03 관련하여 문제가 생겨 질문드립니다.
로그인되지 않은 상태에서 /student/:id에 접속했을 때 /login으로 리다이렉트시키기 위해 AuthRoute를 작성하였는데,
AuthRoute를 적용했을 때 로그인된 상태에서 /student/:id에 접속할 경우 해당 페이지가 나오지 않고 /students로 바로 리다이렉트가 되는 문제가 발생하고 있습니다. 어디를 놓치고 있는지 찾지 못하여 질문드립니다! 코드는 아래와 같습니다.

        <BrowserRouter>
            <Switch>
                <Auth2Route exact logged={logged} path={"/login"} component={LoginPage} />
                <AuthRoute exact logged={logged} path={"/students"} component={Main} />
                <AuthRoute exact logged={logged} path={"/student/:id"} component={Detail2} />
                <Redirect to={"/students"} />
            </Switch>
        </BrowserRouter>

function AuthRoute({ logged, component: Component, render, ...rest }) {
    return (
        <Route
            {...rest}
            render={(props) =>
                logged ? (
                    render ? (
                        render(props)
                    ) : (
                        <Component {...props} />
                    )
                ) : (
                    <Redirect
                        to={{ pathname: "/login", state: { from: props.location } }}
                    />
                )
            }
        />
    );
}

[woohm402]

#591

이 라우팅 방식 어떠신가요?
우리 과제처럼 아예 "로그인하지 않으면 들어갈 수도 없는" 사이트를 만들 때는 라우터 자체를 분리해버리는 게 편하더라고요

[hmlinnie]

공통 피드백 내용을 잊고 있었네요! 감사합니다.
그런데, 공통 피드백 내용과 비슷하게 구성을 하였는데도 여전히 /student/:id로 들어가면 바로 /students로 리다이렉트되는 문제가 발생합니다. 주소가 정확하게 입력되었는데도 리다이렉트 되는 이유를 찾지 못해 다시 질문드립니다ㅠㅠ

const App = () => {

    const {setLogin, logged, setLogged} = useLoginContext();
    const [isLoading, setIsLoading] = useState(false);

    const tokenCheck = () => {

        const token = window.localStorage.getItem('token');

        axios.get(`https://g5imzjo8qf.execute-api.ap-northeast-2.amazonaws.com/v1/auth/check_token`, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        })
            .then(() => {
                setLogin(token);
                setLogged(true);
            })
            .catch(() => {
                toast("토큰 인증 실패");
                setLogin(null);
            })
    }

    useEffect(() => {
        setIsLoading(true);
        if (logged === false) {
            const token = window.localStorage.getItem('token');
            if (token !== null) {
                tokenCheck();
                setIsLoading(false);
            } else {
                setIsLoading(false);
            }
        }
    }, []);

    if (isLoading) {
        return (
            <div>Loading...</div>
        )
    } else {
        if (!logged) {
            return (
                <BrowserRouter>
                    <Route exact logged={logged} path={"/login"} component={LoginPage} />
                    <Redirect to={"/login"} />
                </BrowserRouter>
            )
        } else {
            return (
                <BrowserRouter>
                    <Route exact path={"/students"} component={Main} />
                    <Route exact path={"/student/:id"} component={Detail2} />
                    <Redirect to={"/students"} />
                </BrowserRouter>
            );
        }
    }
}

export default App;

[woohm402]

혹시 리다이렉트가 /students -> /login -> /student/:id 로 되시나요?

로그인되었는지에 대한 조건을 !logged 으로 판별하고 계신데, 그렇게 하면 처음에 useEffect 가 돌기도 전에 로그인되었는지 아닌지 체크하지 못할 때 "로그인됐는지 아닌지 모른다" 가 아니라 "로그인되지 않았다" 로 판별하게 되어 if문에 걸리게 될 것 같습니다.

이제 #569 와 같은 내용의 질문이 된 것 같은데 맞을까요?

[woohm402]

@hmlinnie #633 답변드리다가 알게됐는데 제가 #591 에서 큰 실수를 했었네요ㅜ 죄송합니다

Switch 문 추가해주셔야 돼요

[hmlinnie]

아하 넵!!
#569 에서 말씀하신 것 처럼 토큰 상태 3개로 나누고 switch문 추가하니까 해결되었습니다.
감사합니다~~