2024. 09. 11.(개별과제02)

1.  문제

회원가입까지는 넘어갔으나, 로그인이 되지않는 상태였다. 

로컬스토리지에 저장까지 잘 되는 것 같은데 오류가 있는 코드는 아니여서 이해가 안되었었다.

//처음 작성해본 코드
const handleLogin = async (formData) => {
    try {
      // 로그인 API 호출
      const response = await login(formData);

      if (response) {
        // 프로필 정보를 가져와서 사용자 상태를 업데이트
        const userProfile = await getUserProfile(response.token);
        setUser(userProfile);

        // 로그인 성공 시 홈으로 이동
        navigate("/");
      }
    } catch (error) {
      alert("로그인에 실패했습니다. 다시 시도해주세요.");
    }
  };

 

2.  문제 해결

처음에는 코드 api에 문제가 있는건가 싶어서 확인해보았지만 console로 찍었을 때 잘 찍히는 것으로 나왔다.

그래서 다시 강의를 들어보면서 코드를 다시 짰다.

// 강의를 듣고 수정한 두번째 코드
  const handleLogin = async (formData) => {
    try {
      const loginData = await login(formData);
      localStorage.setItem("accessToken", loginData.accessToken);

      const userProfile = await getUserProfile(loginData.accessToken);
      setUser(userProfile);

      navigate("/");
    } catch (error) {
      alert("로그인에 실패했습니다. 다시 시도해주세요.");
    }
  };

 

두번재 코드로 작성하였을 때에는 다행히 잘 작동하였는데, 제일 처음으로 짠 코드와 차이점이

두번째 코드는 로컬스토리지에 저장하여, 로그인 후 다른 페이지에서 인증이 필요할 때 로컬 스토리지에서 토큰을 가져올 수 있게 하였다.

토큰을 저장하고 안저장하고의 차이때문에 그런거라면 처음 코드에서 토큰 저장부분만 수정하면 되지않았을까 하는 생각에 토큰 저장 부분을 수정하여보았다.

const handleLogin = async (formData) => {
    try {
      const response = await login(formData);

      console.log("Login Response:", response);

      if (response && response.accessToken) {
        localStorage.setItem("accessToken", response.accessToken);

        const userProfile = await getUserProfile(response.accessToken);
        setUser(userProfile); 
        navigate("/");
      } else {
        alert("로그인에 실패했습니다. 서버 응답이 올바르지 않습니다.");
      }
    } catch (error) {
      console.error("로그인 에러:", error);
      alert("로그인에 실패했습니다. 다시 시도해주세요.");
    }
  };

위와 같이 수정하였더니 잘 작동하였다.