리액트 JWT 로그인 및 로그인 유지(유저 인증) 방법

프로젝트가 막바지로 접어들고 있는데

드디어 로그인 및 로그인 유지 기능을 구현했다.

 

사실 로그인 기능은 개념이 그렇게 어렵지 않다.

 

1. 회원가입을 통해 서버에 유저 정보를 심어둔다.

2. 로그인을 통해 입력한 유저 정보가 서버에 존재하는지 확인한다.

3. 입력한 유저 정보가 서버에 존재한다면 토큰을 반환한다.

4. 반환받은 토큰을 가지고 인증을 유지한다.

5. 서버에 요청할 때 토큰을 첨부하면 해당 토큰을 이용해 유저를 인증한다.

 

오늘 게시글에서는 회원가입은 미뤄두고 나머지 기능들을 알아보려고 한다.

 

우선 로그인 하는 방법은 어렵지 않다.

  let body = { username: id, password: password };
  axios
    .post("http://localhost:8080/users/login", body)
    .then((res) => {
      console.log(res.data);
      const accessToken = res.data.token;
      axios.defaults.headers.common[
        "Authorization"
      ] = `Bearer ${accessToken}`;
      navigate("/");
    })
    .catch((e) => {
      console.log(e);
      return "아이디, 패스워드 확인";
    });

위 코드와 같이 서버에 유저 정보를 POST한다.

  let body = { username: id, password: password };
  axios
    .post("http://localhost:8080/users/login", body)

서버에 해당 유저 정보가 존재한다면 토큰을 반환해준다.

    .then((res) => {
      console.log(res.data);
      const accessToken = res.data.token;

그럼 이 토큰을 헤더에 담아준다.

      axios.defaults.headers.common[
        "Authorization"
      ] = `Bearer ${accessToken}`;

이제 로그아웃 하거나 새로고침 하기 전까지는 해당 브라우저에서 로그인 상태를 유지할 수 있다.

 

그리고 서버에 axios를 이용해 요청을 할 때도 별다른 처리 없이도 해당 유저 인증을 할 수 있다.

이렇게 앞서 언급한 5가지 단계에서 2~5단계까지의 처리가 끝났다.

처음에 axios.defaults.headers.common을 이용하는 방법을 몰라서

토큰을 냅다 쿠키에 저장했었는데

그렇게 하니까 코드도 번거롭고 정상적으로 인증도 안되는 오류가 발생했었는데

이제 다 해결하고 행복해졌다. ㅎ