react 로그인 구현 새로고침 시 로그인 풀림

Question

안녕하세요! 질문이 있어서 찾아왔습니다.사실 구글링해서도 많이 나오는 내용이긴한데 제가 아직 실력이 많이 부족하여 적용시키는 부분에 있어서 힘든 부분이 있어서 조언을 구하고자 이렇게 글을 남겨봅니다. 현재 저는 /login 페이지에서 로그인 실행버튼을 누르면 axios로 DB로 접근하여 해당 테이블에 제가 입력한 이메일과 비밀번호를 찾고 일치하면 이메일 값을 반환, 아니면 공백을 반환하고 있습니다. axios.post('./login',{email:{email},password:{password}}) .then((res)&#61;>{ if(res.data &#61;&#61;&#61; false){ alertset(false); } else{ alertset(true); props.idset(email); // 이 부분에서 email을 useState에 저장하고 있습니다. } }) .catch((err)&#61;>{ alertset(false); }) }}> 반환 받은 이메일은 email정보는 let [id, idset] &#61; useState(&#34;&#34;); 를 통해 받아서 로그인이 된 상태인지 아닌지에 대한 판단을 위해서 사용하고 있습니다. (id변수가 비어있으면 로그인이 안 된거고 있으면 로그인 되어 있다고 로직을 구성했습니다.) 다만, 웹 프로그램 특성상 새로고침 시 useState에 저장된 변수들이 모두 초기화 된다는 것이 문제인데요, 로그인이 된 상태(useState id변수가 차있는상태)에서 새로고침을 하면 useState id변수가 비어있는 상태가 됩니다. 이걸 로컬스토리지 함수를 통해서 사용하면 된다고 구글링을 통해서 많이 찾아보기는 했는데 잘 이해가 안갑니다ㅠㅠ 가장 상위 컴포넌트에서만 useEffect 안에서 localstorage를 처리해야할까요아니면 이 id변수를 사용하는 모든 페이지의 useEffect 안에서 localstorage를 처리해야할까요..? 질문을 너무 깔끔하지 못하게 적어서 죄송합니다.ㅠㅠ

장독깨기 · Accepted Answer

1. 가장 상위 컴포넌트에서만 useEffect 안에서 localstorage를 처리해야할까요아니면 이 id변수를 사용하는 모든 페이지의 useEffect 안에서 localstorage를 처리해야할까요..?&#61;> 굳이 클라이언트(브라우저)에서 인증 처리를 하겠다하면 인증이 필요한 모든 페이지에서 처리해야 합니다. 2. 방향이 이상합니다.인증처리, 권한처리 등 모든 비지니스 로직은 서버측에서 해야 합니다.MVC 패턴을 좀 알아보시는게 좋겠습니다.뷰는 넘어온 데이터(Model)를 처리만 하면 됩니다.즉, 뷰에서 제어를 하거나 데이터를 관리하면 안된다는게 기본 개념입니다.

빠꾸는없다 · Answer

우선 휴일인데도 답변 감사드립니다. 사실 저도 제가 생각하는 부분이 이상하다고 생각하긴했습니다. usestate변수에 이메일이 담겼는지 안담겼는지로 로그인을 판단한다는 것이 뭔가 보안상에도 문제가 있을것같고 허술한 느낌이랄까..ㅜㅜ 그렇다면 서버쪽에서 Email값 자체를 View쪽으로 넘기지 말고 다른 방법으로 구현을 하는게 맞다는 의미로 해석하면 될까요?

장독깨기 · Answer

클라이언트(브라우저)에서 보여 줄 페이지를 결정하는 게 컨트롤러의 역할입니다.사용자가 인증(로그인)이 필요한 특정 페이지를 접속한다 가정하고 시나리오를 작성해보겠습니다. 1. 사용자가 특정 페이지를 접속합니다.2. 서버 측 컨트롤러 핸들러에서 특정 페이지의 인증/권한을 체크합니다.3. 인증/권한이 없으면 로그인 페이지(뷰)를 반환합니다.4. 로그인 페이지(뷰) 에서 이메일과 비밀번호를 입력 받아 서버에 인증 요청합니다.5. 서버 측 인증 컨트롤러는 이메일과 비밀번호를 체크해 성공하면 인증 처리를 하고 특정 페이지를 반환합니다. html, javascript, jquery, react, ... 뷰에서 하는 역할입니다.뷰는 페이지 내에서 해야 할 일만 집중하면 됩니다.사용자에게 정보를 입력 받아 서버측에 전달한다든지,서버측에서 넘어온 데이터(모델)를 효율적으로 화면에 보여준다든지, ...

react 로그인 구현 새로고침 시 로그인 풀림

4개의 답변

Q&A 목록