현재 ejs가 아닌 node.js로 express 서버 만들고 프론트에서 React로 localhost 두 개 사용하여 홈페이지 제작하고 있습니다.
Nav Bar에 로그인 전에는 'log in' 글씨가, 로그인 후에는 'My page'로 나오도록 설정하고 있습니다.
그런데 로그인을 해서, 메인으로 redirect한 이후에 바로 로그인 정보가 반영되지 않고, 새로고침 1,2회를 하고 나서야 로그인 정보가 반영됩니다.
그리고 마이페이지에 접속을 해도 같은 현상이 벌어집니다.
어디를 건드려야 메인으로 redirect 되자마자 로그인 여부가 반영될까용?
아니면 이렇게 세션로그인 하는게 아닌가용?
<h1>프론트 사이드</h1>
const NavBarElement = () => {
var [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
axios
.get("http://localhost:8080/session", { withCredentials: true })
.then((result) => {
if (result.data.message) {
console.log(result.data)
setIsLoggedIn(false);
} else {
console.log(result.data)
setIsLoggedIn(true);
}
})
.catch((err) => {
console.log(err);
});
}, []);
return (
<Nav>
{isLoggedIn || <Nav.Link href="/login">Log in</Nav.Link>}
{isLoggedIn || <Nav.Link href="/signup">Sign up</Nav.Link>}
{isLoggedIn && (
<Nav.Link href="http://localhost:8080/mypage">My page</Nav.Link>
)}
{isLoggedIn && (
<Nav.Link href="http://localhost:8080/logout">Log out</Nav.Link>
)}
</Nav>
-------------------------------------------------------------------------------------------------------------------
서버 사이드
app.get("/session", function (요청, 응답) {
if (요청.user) {
응답.json(요청.user);
} else {
응답.json({ message: "No session data" });
}
});
