로그인 구현

로그인 구현 과정

로그인 시 서버에 바디에 받은 accessToken을 쿠키에 저장하고 유저 정보는 recoil에 저장한다.

const loginMutation = useMutation(
    (data: LoginInfor) => {
      return axios
        .post(`${process.env.NEXT_PUBLIC_API_KEY}/auth/signin`, data)
        .then((res) => {
					const data = res.data;
					//쿠키에 access 토큰 저장 //7일동안 
          document.cookie = `accessToken=${encodeURIComponent( data.accessToken)}; exprires=${getCookieExpiration(7)}`;
					//recoil에도 유저 정보를 저장한다.
					const data = res.data;
          setUserInfor(data);
          return res.data;
        });
    },
  );

getCookieExpiration 함수를 통해 7일간 저장한다.

getCookieExpiration 함수는 쿠키의 만료 날짜를 계산합니다. 사용자가 입력한 정보를 encodeURIComponent 를 사용하여 인코딩한 후, document.cookie에 문자열 형태로 설정

const getCookieExpiration = (days: number) => {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    return date.toUTCString();
};

저장한 유저 정보 활용하기.

1. 리코일에 저장하기

import {atom} from 'recoil'
export const userState = atom({
	key: 'userState',
	default:null
})

1. 유저 정보 업데이트하기:유저가 로그인 성공하면 userState에 저장한다.

import {userSetRecoilState] from 'recoil'

function handleLoginSuccess(userInfo){
	const setUser = useSetRecoilState(userState);
	setUser(userInfo)
}

1. 로그인 유저 정보 확인하기: useRecoilValue 훅을 사용하여 userState 값을 가져온다.

import {useRecoilValue} from 'recoil'

function UserInfo(){
	const user = useRecoilValue(userState)

	if(user) {
		return <div>로그인 유저 : {user.name}</div>
	}else{
		return <div> 로그인되지 않음</div>
	}
}

로그아웃 하면 정보 없애기

const user = useRecoilValue(userInformation);
  const resetUerState = useResetRecoilState(userInformation);
  const [logout, setLogout] = useRecoilState<boolean>(logoutModalState);

  const handleLogout = () => {
    document.cookie = `accessToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; `;
    //recoil 상태 초기화
		resetUerState();
		//로그아웃 완료팝업
    setLogout((prev: boolean) => !prev);
  };