로그인

우리 프로젝트에서 로그인을 하면 서버에서 유효성을 검증하고 검증되면 refreshToken이 담긴 쿠키를 주고 response로 accessToken을 주는 방식으로 코드를 짰다.

우선 로그인할 이메일과 비밀번호를 입력받을 페이지를 만들었다.

로그인 페이지

회원가입 페이지와 마찬가지로 mui를 이용한 예시를 사용했다.

api 호출 ( post )

홈페이지로 부터 받아온 이메일과 비밀번호를 서버에 포스트로 요청하면 response로 accessToken을 받는다.

service/user.ts

export const mutateSignIn = ({ email, password }: ISignInProps) => {
  const url = '로그인 api';
  return axios
    .post<IResponseAuthToken>(url, {
      email,
      password,
    })
    .then((res) => {
      console.log(res);
      return res.data;
    });
};

📌 이렇게 받아온 res.data 에는 accessToken값이 들어있다

hook (mutate)

회원가입과 마찬가지로 useQuery의 useMutation을 이용했다.

hook/use-mutate-signin.ts

export const useMutateSignIn = (
  mutateFunction: ({
    email,
    password,
  }: ISignInProps) => Promise<IResponseAuthToken>
) => {
  const navigate = useNavigate(); 
  const { mutate, data } = useMutation('signin', mutateFunction, {
    onSuccess: (data) => {
      axios.defaults.headers.common['Authorization'] =
        'Bearer ' + data.accessToken;
      navigate({
        pathname: '/',
      });
    },❓
    onError: () => {},
  });

  return { mutate, data };
};

📌 우리 프로젝트 방식이 accessToken을 받으면 바로 axios header의 default값으로 넣어줘서 api 호출 시마다 유효성을 체크하는 방식이기 때문에 성공시에 header에 담아줬다

❓ 앞에 'Bearer' 를 붙혀주는 이유는 국룰이된 규칙이라는데 정확히는 알아봐야 할것같다.

📌 refreshToken은 서버에서 쿠키를 만들고 그 안에 넣어서 프론트로 보내주기 때문에 따로 작업은 하지 않았다

📌 또한 회원가입과 마찬가지로 useNavigate를 이용해서 성공시 홈페이지로 들어가게 설정해주었다.