리액트 페이지 접속막기 질문있습니다.

Question

로그인안한 사용자가 writer등 페이지를 들어가면 이런식으로해서 '/'로 돌려보내는 식으로 구현하려고합니다.if(!user){ 로인해 }다음과 같이해봤습니다.로그인할때 리덕스 디스패치함수에서 로컬호스트와 리덕스 state에 user정보를 넣어주고있습니다. 이렇게하고 App.js에서 로컬스토리지 get을해서 하위컴포넌트들한테 뿌려주면 user 정보를 통해서 로그인된 유저만 접속할수있게끔할 수 있지않을까 싶어서 해봤는데요 ( 리덕스 state에 저장한 user를 사용안한 이유는 밑에서 설명드리겠습니다.) // console.log(user); 주석으로 처리한 부분을 확인해보면 로그인하고 '/'로 가게되면, null 이 나옵니다.정확하게는 null도 안찍혀요 콘솔 코드가 동작을 안합니다. 당연히 user가 아예 없기때문에 writer 페이지를 접속해도 '/' 로 튕겨나오구요. 새로고침을 해줘야 코드가 동작을합니다. 제 생각으로는 리액트 컴포넌트값이 바뀌어야 랜더링되는데 로그인하면서 바뀐게없어서 그런거가 아닐까 싶습니다.그래서 전역state에 저장한 user를 사용하자로 노선을바꿔봤습니다.이렇게해서 하면 잘 동작은 합니다. 근데 처음에 이렇게 안한 이유는.. header 컴포넌트에서 리덕스 state로 user정보를 불러오면, 이미지가 잠시 엑박떴다가 로드되는 현상때문에 로컬호스트에 user정보를 get해서 사용하고있어서 코드가 비슷하게 겹쳐서 굳이 써야하나 싶어서 망설였었고.. (초보자라 이런 쓸데없는 생각했었습니다..) 2번이 핵심인데, 로그인 한 유저가 Writer 페이지에서 새로고침을하면 '/'로 튕겨져나갑니다. state가 바로 바뀌는게아니라 다음 코드부터 실행시키고 그다음 바뀌는.. 약간의 텀이 생겨서 처음엔 null을 리턴시켜주고 이후에 user 정보를 state에 담아줘서 생기는 현상같은데,, 제가 생각하기에 이런 현상을 해결하려면 단순하게는 user가 필요한 컴포넌트에서 일일히 const user = JSON.parse(localStorage.getItem('userInfo')); 를 쳐서 user를 사용하는게 간단한거같고, 아니면 if(!user){ '/' 로 떨구기} 이 코드를쓰는것보다는 컴포넌트들을 조건문으로 보여줘서 {!user && <컴포넌트들..>} 이런식으로 하는게 나을까 싶기도하구요.. 혹시 선배님들은 어떤방법을 쓰시나요?

swimmingPolar · Answer

https://github.com/remix-run/react-router/tree/dev/examples/authAuthGuard, RouteGuard, NavGuard, PrivateRoute 등등 여러 이름으로 불리는데 아무튼 권한이 없으면 리다이렉트 시키는 기능입니다. reac router dom 공식 문서에 올라온 내용이니까 기준이 될 겁ㅁㅣ니다

리액트 페이지 접속막기 질문있습니다.

1개의 답변

기타 목록