전역 상태 관리
로그인 컴포넌트 → useLogin훅 안에서 mutate함수로 onSuccess시에 전역스토어 setLogin함수에 접근해 user객체와 토큰을 저장
전역스토어 에서는 hook을 호출 못하니까 localstorage 관련한 로직을 훅으로 뺄 수 없다 + 유틸함수로 관리하기에는 순수함수가 아닐뿐더러 state관리도 하는 것이 아니라 바람직하지 않다 → class로 만들어서 가져오자
새로고침하면 전역 데이터 다날라감 → auth-user를 호출해서 user를 다시 전역에 업데이트 시켜야한다(서버에 있는)
새로고침할때마다 auth-user를 불러서 사용자 인증을 통해 성공시 다시 로그인해서 상태를 업데이트한다.
페이지마다 전역상태에 접근해서 받아와야 하는 값
헤더
id 필요, 프로필 이미지 필요
로그인
필요없음
회원가입
필요없음
프로젝트 상세조회
id랑 프로필, 닉네임 이미지 필요
- 게시글 관련
- 전역에 있는 id랑 프로젝트 소유자 id와 비교하여 구분
- 댓글
- 프로필 사진띄울때 프로필 이미지주소 필요
- 내 댓글일 경우 수정/삭제가 가능해야 하니까 댓글들 사용자 id랑 내 id 비교해서 내꺼랑 구분(주소)
프로젝트 작성/수정
필요없거나 사용자 id 정도
프로필 조회
id 필요, 프로필 이미지, 닉네임
내id랑 주소id를 비교해서 내꺼랑 남의 꺼 구분
프로필 수정
소셜로그인? or 이메일로그인? ⇒ isSocialLogin
메인
id
검색결과
id
서버로부터 받아오는 user객체 데이터 가공 vs 필요한 것만 내려주도록 요청
id랑 profileimgurl, 닉네임 빼고는 필요없어보임
주의할 점
id가 바뀔일은 없지만 profileimgurl은 프로필 이미지 변경으로 바꿀수 있기 때문에 이때만 전역에 있는 스토어에 접근해서 업데이트를 해줘야 함
새로고침 시 store 삭제되는문제
기존 프로젝트
isLoggedIn를 따로 전역 상태에서 관리
- 근데 애초에 새로고침할때 마다 auth-users통해서 가장 최신의 user객체를 전역에서 받아오므로 이것도 필요없음
- 유저의 로그인 유무를 id가 있냐 없냐로 판단 함
개선한 점
최대한 로컬스토리지에 토큰외에 값을 담지 않기 위해 persist가 아닌 auth-user api호출을 통해 성공시 그대로 user객체를 업데이트하고(로그인이 아닌) 실패 시 로그아웃 처리
만약!!
사용자가 가만히 있다가 accessToken이 만료돼서 로그인을 할 수 없는 경우는 알아서 재로그인 하도록 axios에서 따로 처리, 만약에 refreshToken까지 만료되면 로그아웃 처리
어디서 이걸 처리?
라우터의 loader 옵션
일단 api 호출이 아니라 그냥 upate로 실험해봤는데 오류가 있음.
실제 api 호출로 되면 이걸로 하면 될듯
헤더 컴포넌트
userQuery써서 하면 되지 않을 까 싶음
그것도 안되면 useEffect
로그인, 회원가입 페이지는 어차피 로그인 안된 상태이므로 할 필요 없음
결론
깔끔하게 로컬스토리지에는 JWT토큰만 관리되고, user객체는 전역스토어에 관리된다.
문제점
- 헤더에서 불렀을때 데이터의 종속성
- initialData도 문제 데이터 뿌리는데
서버에서 내려준 프로젝트에 isOwner로 분리
App.tsx는 함수라서 return
isLoggedIn이 훨신명확함
- owner값ㄷ이 더 맞음
- 프론트 데이터는 항상 위변조가능함
- 내가 임의로 전역데이터 바꿔버리면 타인의 게시글 위변조
- 리액트 포탈
- useModal