토큰 유무에 따라 로그인/로그아웃 구현하기

프로젝트를 시작하기 전 로그인/회원가입을 백엔드와 함께 구현해보았지만 백엔드에서도 jwt 토큰 발급을 제대로 구현해보지 못해 토큰 관리는 이번 프로젝트에서 처음 해보았다. 그래서 이번 포스팅에는 토큰 관리와 그에 따른 ui가 바뀌는 것에 대해 이야기해보려고 한다.

 

response로 오는 token을 localstorage에 저장하기

백엔드에게 post method로 로그인 페이지에서 email과 password를 보내면

백엔드 쪽에서 회원가입이 되어있는 사람이라면 로그인 성공 메세지와 함께 jwt 토큰을 보내준다.

이 때 개발자에 따라서 status code 또는 메세지 또는 두개 다 없이 토큰만 보내줄 수도 있다.

토큰이 localstorage에 들어오면 로그인이 된 상태로 유지된다.

login.js

  const postUserData = () => {
    fetch('http://10.58.52.243:3000/users/signin', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: inputValue.id,
        password: inputValue.pw,
      }),
    })
      .then(response => {
        return response.json();
      })
      .then(data => {
        if (data.accessToken) {
          localStorage.setItem('token', data.accessToken);
          navigate('/');
        } else if (data.message === 'USER_IS_NOT_VALID') {
          setIsModalOpen(true);
        }
      });
  };

 

 

로그인한 유저에 따라 다른 ui 구현

그리고 로그인이 된 화면과 안 된 화면을 다르게 구현해주기 위해 로그인/로그아웃 버튼과 토글의 ui를 바꾸어주었다.

locastorage에 token이라는 key값이 있는지를 판단하고 있다면 로그아웃 버튼을 없다면 로그인 버튼이 보이도록 구현했다.

쉽게 정리하자면 locastorage의 token 값 ? 로그아웃 : 로그인 으로 구현한 것이다.

const LoginBtn = ({ onLogin }) => {
  return localStorage.getItem('token') ? (
    <button className="logoutBtn" onClick={onLogin}>
      로그아웃
    </button>
  ) : (
    <Link to="/login">
      <button className="loginBtn" onClick={onLogin}>
        로그인
      </button>
    </Link>
  );
};

 

비회원의 장바구니 접근 막기

또 비로그인 시 장바구니 버튼 클릭하면 로그인 페이지로 이동하고

로그인을 한 경우 장바구니 페이지로 넘어갈 수 있도록 if 문을 사용해주었다.

  const goToCart = () => {
    if (localStorage.getItem('token')) {
      navigate('/cart');
    } else {
      navigate('/login');
    }
  };

그리고 카트 아이콘에 onClick을 걸어주고 만들어둔 함수를 안에 넣어주었다.

     <FontAwesomeIcon
            icon={faCartShopping}
            className="cart"
            onClick={goToCart}
          />

 

 

이렇게 토큰을 관리하고 토큰에 따라 로그인/로그아웃 ui를 구현하는 방법을 알아보았다. 토큰 삭제는 동기분이 구현을 하여서 따로 적지는 않았지만 말로 설명하자면 버튼을 onClick 하였을 때 localStorage.removeItem('token')이 실행되도록 해주면 된다.

이후 추가로 알게 된 refresh token이 있다. accessToken이 들어오고 일정 기간이 되면 사라지고 refresh token이 계속 재발급이 되면서 로그인이 계속 유지가 되는 것이다. 이것도 한번 관리를 해보고 싶다는 생각이 들었다.