TIL 82일차 (20240423)

오늘의 목표

• 로그아웃, 회원가입 메인 페이지에 연결, 프론트 구현
• 채팅에서 퇴장 메세지까지 삭제
• 채팅과 DB 연결해서 방 열릴 때 내역들 같이 뜨도록
• access token 만료 시 refresh token으로 재발급 받기 (제발 좀 빨리 해라 나야...)
• 시간 된다면 프로필 이미지 저장까지...

1. 로그아웃 구현

와이어프레임에서 로그아웃 페이지는 따로 없이 버튼으로만 작동하게끔 기획했기 때문에 js만 새로 만들었다.

// logout.js

const token = window.localStorage.getItem('authorization');

function logout(){
    fetch('http://localhost:3000/user/logout',{
        method:'POST',
        headers:{
            Authorization:`Bearer ${token}`
        }
    })
    .then(res=>{
        if(res.status === 201){
            window.localStorage.removeItem('authorization');

            alert('로그아웃 성공');

            window.location.href = 'http://localhost:3000/main';
        }else{
            alert('로그아웃 실패');
        }
    })
    .catch(error => 
        console.error('Error:', error));
}

document.getElementById('logout').addEventListener('click', logout)

이 때 컨트롤러에서 passport의 UseGuards를 쓰므로 headers에 Authorization과 Bearer을 첨가해서 보내준다.

참고: https://reqbin.com/code/javascript/ricgaie0/javascript-fetch-bearer-token