로그인/로그아웃 시 화면에 다른걸 띄우기

에릭리·2022년 8월 7일
1

TIL

목록 보기
8/8

로그인/로그아웃때 화면에 보여지는걸 다르게 하려면 로컬스토리지에 저장되어있는 토큰을 가져오면 된다.
로그인이 되어있는 상태일 경우 토큰은 존재할 것이고
로그아웃 상태일 경우 토큰은 없을 것이다.

코드

// getItem으로 토큰을 가져오고 이 토큰을 token이라는 변수에 저장
  const token = localStorage.getItem('access_token');

/* 로그아웃버튼 클릭시 로그아웃 window.confirm으로 로그아웃 확인 버튼
이 나오고  확인시 로그아웃 됨*/ 
  const logOut = () => {
    if (window.confirm('로그아웃 하시겠습니까?')) {
      alert('로그아웃 합니다.');
      navigate('/');
      localStorage.removeItem('access_token');
    } else {
    }
  };


//조건부렌더링으로 token이 ? 일시 로그아웃 버튼이 활성화, 
// :일시 로그인 버튼이 활성화
return (               
  {token ? (
   <div className="login-text" 
   onClick={logOut}>
                    로그아웃
                  </div>
                ) : (
                  <div
                    className="login-text"
                    onClick={() => navigate('/login')}
                  >
                    로그인
                  </div>
)

서버주소:http://1st-loctea.s3-website.ap-northeast-2.amazonaws.com/

0개의 댓글