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