웹 개발시 페이지에 유저 정보 구현

Question

현재 백엔드 공부중에 간단한 커뮤니티 사이트 구현을 목표로 만들고 있습니다!로그인까지는 구현해보았는데 로그인 후 /site로 리디렉션할 때 fetch로 요청을 보내면 헤더에 accessToken을 담아서 전달할 수는 있지만 페이지가 열리지 않는 문제점과 location.href로 요청을 보내면 사이트는 열리지만 헤더에 accessToken을 담지 못하여 유저 정보가 열리지 않는 문제점이 생겼습니다. ㅜㅜ 어떻게 해결하는게 좋을지 조언 부탁드립니다!document.querySelector('.loginForm').addEventListener('submit', async function (event) { event.preventDefault(); // 폼 기본 제출 동작 방지 const email = event.target.email.value; // 입력된 이메일 const password = event.target.password.value; // 입력된 비밀번호 try { // 서버로 POST 요청 const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email, password }), }); // 응답 처리 const data = await response.json(); if (response.ok) { const accessToken = data.accessToken; // 서버에서 받은 JWT 토큰 localStorage.setItem('accessToken', accessToken); window.location.href = `/site?accessToken=${accessToken}`; // 로그인 성공 후 리디렉션 } else { alert(data.message); // 로그인 실패 메시지 표시 } } catch (error) { console.error('로그인 실패:', error); }});loginRequest.js 코드.get(authenticate, asyncHandler(async (req, res) => { const data = await Post.find().sort({ createdAt : -1 }); const formattedData = data.map(item => ({ ...item._doc, formattedDate: dayjs(item.createdAt).format('YYYY.MM.DD'), })) let name = null; // name 변수를 함수 범위에서 선언 if (req.user && req.user.userId) { const id = req.user.userId; const user = await User.findById(id); name = user ? user.name : 'Unknown'; } else { name = null; // userId가 없거나 req.user가 null인 경우 } res.render("site", { data : formattedData, name }); }))siteRoutes 코드 입니다

나땅 · Answer

프론트엔드쪽 세션 혹은 그에 대응할 수 있는 매체에 저장해놓고 꺼내와서 쓰면 되지않나요?

코마상태 · Answer

궁금한 점이 있는데,     localStorage.setItem('accessToken', accessToken); 이렇게 저장 해두시고, 다시 herf 에 저장해서 리디렉션 하는 이유가 있어요? 그냥 스토로지에서 꺼내쓰면 될 것 같은데

웹 개발시 페이지에 유저 정보 구현

2개의 답변

#express 목록