인프런 커뮤니티 질문&답변
작성한 질문수
인증 체크 부분 app..js 부분 질문이요
작성
·
308
0
안녕하세요 좋은 강의 잘 들었습니다:)
다름이 아니라 제가 강의를 들으며 실습을 병행해 공부를 하는 중인데요
강의가 열리고 react-router-dom이 업데이트되어서 인지 제 컴퓨터에서는 app.js에서 Switch를 사용하면 진행이 되지 않아 구글링 한 결과로 <Routes>를 사용하고 <Rounte component >대신 < element >를 사용해서 학습을 진행해왔었습니다.
그런데 마지막 인증 체크 부분 강의를 들으면서 문제가 생겼는데요
app.js에서 auth를 어떻게 적용해야 할 지 잘 모르겠습니다.
강사님의 코드를 따라하기엔 저는 component를 사용해서 적용이 안되는 것 같습니다.
구글링을 해봐도 해결할 수 없어 질문글을 남깁니다 감사합니다.
답변 2
4
안녕하세요!
저도 마찬가지로 react-router-dom v6를 사용해서
꽤 문법이 많이 달라져서 많이 찾아보고 강의들었어요!
제 글 참고하시고 도움되시면 좋겠습니다.
hoc/auth.js
import React from "react";
import { useDispatch } from "react-redux";
import { authUser } from "../_actions/user_action";
import { useNavigate } from "react-router-dom";
export default function Auth({ SpecificComponent, option, adminRoute = null }) {
const dispatch = useDispatch();
const navigate = useNavigate();
dispatch(authUser()).then((response) => {
if (!response.payload.isAuth) {
// 로그인 하지 않은 상태
if (option) {
navigate("/login");
}
} else {
// 로그인 한 상태
if (adminRoute && !response.payload.isAdmin) {
navigate("/");
} else {
if (option === false) {
navigate("/");
}
}
}
});
return <SpecificComponent />;
}
App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";
import Auth from "./hoc/auth";
function App() {
// Auth option
// null -> 누구나 접근 가능
// true -> 로그인 한 유저만 접근 가능
// false -> 로그인 한 유저는 접근 불가능
return (
<Router>
<Routes>
<Route
path="/"
element={<Auth SpecificComponent={LandingPage} option={null} />}
/>
<Route
path="/login"
element={<Auth SpecificComponent={LoginPage} option={false} />}
/>
<Route
path="/register"
element={<Auth SpecificComponent={RegisterPage} option={false} />}
/>
</Routes>
</Router>
);
}
export default App;
0
감사합니다. 개인적으로 궁금한게 이러한 패턴도 hoc인가요??