프론트 깃허브 링크
실전프로젝트 SA링크

실전 프로젝트에서는 원래 배운 내용들을 깃허브에 올리는 방식이 아닌 하루하루 진행 상황과 느낀점들을 기록하기 위해서 벨로그에 TIL을 작성하기로 했다.

1. 진행상황

로그인 관련 기능 구현중

마이페이지 기능 구현중

2. 배운 내용들

1. 서버에 권한 요청시 헤더에 토큰이 안넘어가는 문제 발생

로그인 한 시점에 토큰이 생기고, 그 후 header에 담아야하는데 그전에 담는 코드가 실행되어 null 값으로 들어가서 문제가 발생했다.

shared 폴더에 axios.tsx 파일에서

   const token = getCookie("token");
          instance.defaults.headers.common["Authorization"] = token
            ? `Bearer ${token}`
            : null;

토큰을 header에 담는 부분을 빼서,

로그인을 하면 실행되는 함수에

await axios
      .post("https://www.btenderapi.com/api/user/login", data)
      // .post("/user/login", users)
      //성공시 리스폰스 받아옴
      .then((response) => {
        console.log(response);
        const accessToken = response.data.token;
        const nickname = response.data.nickname;
        const userId = response.data._id;
        //서버에서 받은 토큰 저장
        setCookie("token", accessToken);
        setCookie("nickname", nickname);
        setCookie("userId", userId);
        if (accessToken) {
          setIsLogin(true);
          const token = getCookie("token");
          instance.defaults.headers.common["Authorization"] = token
            ? `Bearer ${token}`
            : null;
          navigate("/main");
        } else if (response.data.msg === "1") {
          window.alert("가입되지 않은 이메일입니다.");
        } else if (response.data.msg === "2") {
          window.alert("비밀번호가 틀립니다.");
        }
      })
      //실패시 에러메시지 받아옴, 작성한 벨리데이션 문구도 같이
      .catch(function (error) {
        window.alert("서버가 아파요! 잠시만 기다려주세요!");
      });
  };

넣어줘서 로그인을 하고 서버에서 토큰을 받아오고 난 후 헤더에 담길 수 있게해서 해결하였다.