✨ side bar 때문에 시작된 로그인 권한별 라우팅 설정하기
고민 과정
나머지꺼 아직 해결안된거 그냥 다 미루고,
결제, 내정보 등 기타 페이지 ui부터 만들려고 했는데…
로그인상태인 경우에는 왼쪽에 사이드바가 생기는 Ui였다.
그렇게 만들려면 outlet을 하나 더 만들어야하나…?
고민하던 과정이다.
이게 또 헤더는 로그인여부 관계없이 똑같은 헤더가 보이고 있고,
사이드바는 로그인일때만 보여져야 하니까 난감했다.
->
layout 내용을 로그인 상태에 따라
로그인이면 사이드바 보이게, 아니면 안보이게
처리하면 되는거였다. (AuthenticatedLayout.tsx)
(css는 추후 고민 예정)
->
middle ware, createBrowserRouter 활용해서
로그인시 접근할수있는 페이지,
접근할수 없는 페이지 접근시 replace 시키기
등의 처리
최종 정리
✅ Zustand + localStorage로 로그인 상태 관리 ✅ createBrowserRouter + Middleware 패턴으로 로그인 여부에 따라 접근 제어 ✅ 로그인 상태일 때만 사이드바 표시하는 레이아웃 적용 ✅ 새로고침해도 로그인 상태 유지됨
이제 API가 나오면 login()과 logout()을 수정하면 쉽게 연결 가능! 🚀
⭐️ src > routes > routex.tsx
routes.tsx를 라우팅 기본 파일로 만들려면
- main.tsx에서 로 감싸줬던건 없애기!
- App.tsx에서 이거만 넣어주면 끝!!
->
ㄷㄷ….. 해보니까 왜 버그 투성이인건데…. 뭔데이거….
🛠️ 트러블슈팅
[ 이슈를 해결해보자!!! ]
- zustand에서 로그인, 로그아웃 처리가 제대로 되고 있는가?
- login, logout 잘 동작함
(console에 isAuthenticated true/false 상태 잘 뜸,
local storage 에 값 잘 들어왔다 나갔다 함) - 메인페이지에서 로그인/로그아웃 상태에 따라 사이드바 떴다 없어졌다 잘 함
- 로그인시 payment 사이트도 접근 잘 됨, 로그아웃시 접근 안되는 처리도 잘 됨
(Payment페이지에서 로그아웃시 로그인페이지로 자동이동은 안됨)
🛠️ 문제
= public middleware 부분의 페이지들에서는 헤더가 안뜸
-> 원인
- 라우팅에 영향받지않는 최상위 Layout.tsx가 필요했음. (Header포함한)
- “/“에는 Layout 보이게 설정해놓고, children 안에서 AuthenticatedLayout, 그안의 children에서 authMiddleWare에 속하는 페이지들 보여주기.
- Layout 의 children에는 publicMiddleware에 속하는 애들 넣어주기
= 로그아웃 상태에서도 메인페이지 접근됨 (사이드바는 없는채로 뜸)
-> 원인
로그아웃버튼 클릭시 navigate 처리를 안해서 그럼.
로그아웃과 동시에 링크도 이동하는 로직을 추가한다면 괜찮음
= payment 페이지에서 로그아웃하면 바로 홈으로 이동하는게 아니라 그 페이지에 그대로 유지되어있음. 새로고침 해야지만 로그인페이지로 이동됨
-> 원인
위와 마찬가지. (로그아웃시 링크이동 로직 추가 필요)
- 로그인, 로그아웃시 곧바로 페이지가 이동되는게 아니라
새로고침 해야지만 이동되는 이슈?
( 메인페이지에서 로그아웃하면 사이드바도 바로 없어지고 isAuthen도 바로 false로 바뀌는데 페이지는 메인페이지에 머물러있음, 새로고침하면 로그인페이지로 이동
로그인 페이지도 마찬가지 )
-> 원인
-> 해결시도
1. useEffect안에서 링크이동 시켜보기, 의존성 배열에 navigate도 넣어보기
2. handleLogin, handleLogout 함수안에서 링크이동 시켜보기
3. 위 함수 2개를 async, await로 바꿔보기
4. routes.tsx에서
const isAuthenticated = useAuthStore.getState().isAuthenticated;
로 불러오던 방식을
useAuthStore에서 직접 가져오는 방식으로 수정해보기
(-> uncaught 에러 뜸 캡쳐 참고)
- authStore에서 login(), logout() 로직 안에
window.location.href = "/";
window.location.href = "/login";
이거 각각 넣어보기. authStore에서 직접 링크이동하는 로직 강제 주입
=> 해결!!!
미들웨어 제어 로직 정리
📝💦 미들웨어 사용해서 로그인 상태에 따라 접근 제어하는 로직 정리
- zustand에서 로그인상태 관리
-
login
1) localStorage에 토큰 넣기
2) isAuthenticated 상태를 true로
3) 강제 페이지 이동 -
logout
1) localStorage에서 토큰 빼기
2) isAuthenticated 상태 false로
3) 강제 페이지 이동
- routes.tsx 파일 생성
-
App.tsx 설정 :
-
routes.tsx에서 authMiddleware, publicMiddleware, router생성
-
authMiddleware
1) isAuthenticated를 가져와야하는데, 얘는 리액트 함수 컴포넌트가 아닌 일반 함수이기 때문에 useAuthStore, 즉 리액트 훅을 가져올수 없다.
따라서 const isAuthenticated = useAuthStore.getState().isAuthenticated;
형식으로 가져와야 함
2) ture이면 인자를, false이면 로그인페이지로 replace -
router
1) createBrowserRouter 사용
2) 공통 path “/“에는 공통 Layout 넣기, children에서 나머지 권한 설정들을 해준다.
3) children : 로그인 페이지에서만 보여주는 사이드바 같은게 있다면 AuthenticatedLayout 을 element로 지정, chilren으로 로그인시 보여줄 페이지들을 element에 넣어주기 (authMiddleware()) 이런식으로
4) 이외 publicMiddleware에서 보여줄 페이지들을 지정한다.
