트러블 슈팅
하나의 버그를 발견했다!
const useBearsStore = create((set) => ({
isAuthenticated:false, //로그인 여부 확인
accessToken: localStorage.getItem("accessToken"),
user: null, // 사용자 정보 가져오기zustand를 사용하여 초기상태를 설정했는데, 초기 로그인 상태를 false로 두고 사용자가 로그인 상태이면 true, 로그인상태가 아니면 false를 반환하도록 코드를 구현했다.
하지만 로그인하고 새로고침 하면 로그인이 유지가 되지 않았다.
const { checkToken, isAuthenticated } = useBearsStore();
console.log("auth", isAuthenticated);
useEffect(() => {
checkToken();
}, []);이렇게 코드를 찍어보니, 로그인이 잘 유지되다가 잠시 로그인이 풀려버리고 다시 자동으로 로그인이 되는 대환장의 사태가 일어났걸 파악하고 수정했다.
Zustand는 상태 관리 라이브러리로, 상태가 변경될 때 해당 상태를 사용하는 컴포넌트가 자동으로 다시 렌더링되도록 한다.
따라서, 로그인을 하고 새로고침을 하면 true -> false로 잠시 바뀌었다가 , token이 존재하니 알아서 다시 로그인 상태를 유지해주는 true로 바뀐것이다.
해결
const useBearsStore = create((set) => ({
isAuthenticated: !!localStorage.getItem("accessToken"), //로그인 여부 확인
accessToken: localStorage.getItem("accessToken"),
user: null, // 사용자 정보 가져오기!!를 사용하여 값이 존재하는지 여부를 boolean으로 변환하게 하였다. localstorage에서 token을 확인하고 localstorage가 null 또는 undefined이면 !!null은 false가 된다.
token이 존재하면 !!"accessToken"은 true가 된다.
따라서, isAuthenticated는 사용자가 로그인한 상태인지 (true 또는 false)를 나타낼 수 있다.
이렇게 하니, token이 있기 때문에 로그인 유지가 가능해졌다.
isAuthenticated:!!localStorage.getItem("accessToken")
동적 설정: 로컬 스토리지에 "accessToken"이 있으면 true, 없으면 false.
유용성: 사용자의 로그인 상태를 로컬 스토리지의 값에 따라 자동으로 설정할 때 유용.
isAuthenticated: false
고정 설정: 항상 false.
유용성: 사용자가 로그아웃 상태임을 명시적으로 설정할 때 유용
첫 번째 방법은 사용자의 로그인 상태를 로컬 스토리지의 "accessToken"에 따라 동적으로 설정하는 반면, 두 번째 방법은 항상 로그아웃 상태로 설정하는 고정적인 방법. 렌더링 여부에 따라 유동적으로 사용하면 될 듯하다
