Login 기능 연결하기

[SJ-Lee33]

1. 토큰 저장

로그인을 하면 토큰을 통해 사용자를 구별할 수 있습니다. 토큰은 recoil로 관리하며, useAuth 훅을 통해 불러올 수 있습니다.

예) useLogin.js

const { updateAuth } = useAuth();    
// updateAuth : 로그인 성공시 response로 받는 token을 저장하는 함수 

---

2. API 연결

로그인 API는 users/login 이라는 url을 통해 요청할 수 있습니다.

따라서 다음과 같이 API를 연결해 줍니다.

loginAPI.js

import { axiosInstance } from "../../../core/axiosInstance";

export const loginAPI = async (request) => {
  const { data } = await axiosInstance.post("users/login", request);
  return data;
};

---

3. 로그인의 이메일, 패스워드 입력 받기

useLoginForm.js 에서 email, password를 받는 함수를 제작해 return 해줍니다. recoil을 활용해 관리합니다.

예)

 const [loginForm, setLoginForm] = useRecoilState(loginFormState);

  const setEmail = (email) => {
    setLoginForm((form) => ({
      ...form,
      email: email,
    }));
  };

 return {
    email: loginForm.email,
    setEmail,
  };

---

4. 입력받은 정보로 로그인 요청하기

2번에서 작성한 loginAPI를 활용합니다.

useLogin.js

 try {
      const { token } = await loginAPI({
        email: inputEmail,
        password: inputPassword,
      });  // 로그인 request를 통해 받은 response를 token에 저장

      if (token) {
        await updateAuth(token);
        onSuccess && onSuccess();
      } // token을 잘 받아왔다면 로그인에 성공한 것
    } catch (error) {
      onFail && onFail(); // token을 못받아왔거나 에러가 발생하면 로그인 실패한 것
    } finally {
      setIsLoading(false);
    }

---

5. 로그인 요청을 할 컴포넌트 지정

LoginBtn.js 에서, 로그인 버튼을 누를 시 위의 모든 과정이 돌아가도록 loginHandler을 정의하여 지정해 줍니다.

여기서 로그인 성공시 main 페이지로 넘기기 위해, useNavigation이라는 react-router-dom 내장 훅을 활용합니다.

export default function LoginBtn() {
  const { loginReset } = useLoginForm();
  const { login, isLoading } = useLogin();
  const { openModal } = useLoginFailModal();
  const navigation = useNavigate();

  const loginHandler = () => {
    login({
      onSuccess: () => {
        loginReset();
        navigation("/main");
      },
      onFail: () => {
        openModal();
      },
    });
  };

  if (isLoading) return <div>loading...</div>;

  return <Button onClick={() => loginHandler()}>로그인</Button>;
}