[보배빌림] 로그인, 로그아웃 기능구현

로그인 기능 구현하기

로그인과정

email,password 를 입력 ->
서버로 eamil,password 데이터를 담아 post요청 ->
서버에서 데이터 확인 인증후 응답 ->
응답으로 accesstoken을 받는다.
유저는 받은 accesstoken으로 마이페이지,등 서비스이용할때 서버로 token과 같이 요청을 보내 서비스를 사용!

일반적인 로그인 과정은 이렇다.
여기서 로그인 유지 체크를 하였을시에 대한 분기를 나누는것도 고려해서 만들면 된다.

우선 내가 사용한 방법은 브라우저 메모리 저장객체인 localStorage, sessionStorage을 사용하였다.

localStorage, sessionStorage을 사용한 이유!

localStorage에 저장된 값은 브라우저를 껏다 켜도 지워지지않는다. -> 강제로 지워야함 (removeItem('지울 key'))
다르게 sessionStorage는 브라우저를 끄면 저장된 값이 사라진다.

위의 저장객체만의 특성을 고려하여
로그인유지 체크를 하였을때 localStorage에 token을 저장하여 브라우저를 껏다 켜도 저장된 token이 남게하여 다시 로그인할 필요없이 token으로 서비스를 바로 이용할 수 있게 만들것이고,
로그인유지 체크를 하지않고 로그인 하였을때에는 sessionStorage에 token을 저장하여 브라우저가 꺼지면 저장된 token이 사라지게하여 다시 로그인을 해야하게끔 만들것이다.

-> setItem() 메서드를 사용하여 저장객체에 값을 넣을 수 있다.

localStorage.setItem('key',token)
sessionStorage.setItem('key', token)

import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const LoginBtn = () => { // 로그인 버튼을 눌렀을때 handler
  const navigate = useNavigate();
  const data = {email: 'hyo@naver.com', password: '1234567!!'};
  
  axios.post('api', data, {
    headers: {
       'Access-Control-Allow-Origin': '*',
       // cors error를 막기위한 옵션
    } 
  })
  .then((res) => {
    const access_token = res.headers.accesstoken.split(' ')[1];
    // 서버쪽에서 엑세스토큰을 응답headers에 accesstoken이라는 키값에 넣어 줬다면 이렇게 쓴다.
    // 그리고 뒤에 split(' ')[1] 을 붙인 이유는 토큰이 올때 'Bearer 토큰~~~~' 이런식으로 오기 때문에 나는 받아서 저장할때 Bearer을 빼주었다.
    const refresh_token = res.headers.refreshtoken;
    
    if(checked){ // 로그인유지 체크가 되었을때!
       localStorage.setItem('access_token', access_token);
      localStorage.setItem('refresh_token', refresh_token);
      // 엑세스토큰이 만료되었을때 refresh_token을 서버로 보내면 엑세스토큰을 재갱신 할 수 있으므로 
      //로그인 유지 체크를 하였을땐 보다 길게 로그인을 유지할 수 있도록 refresh_token도 저장해두었다.
    }
    else { // 로그인유지 체크가 되어있지 않을때!
      sessionStorage.setItem('access_token', access_token);
    }
  })
  navigate('/')
  // 로그인에 성공하면 path가 '/' 인 페이지로 redirect를 시켜준다.
}

위와 같이 로직을 구성하면 로그인에 성공하였을시
로그인 유지 체크를 하였을때 브라우저를 껏다켜도localStorage가 accesstoken을 가지고 있으므로 그 token을 로그인이 필요한 요청 페이지마다 보내주어 로그인이 필요한 페이지를 이용할 수 있게된다.

refreshtoken 리프레쉬토큰

accesstoken을 재갱신하는 방식

클라이언트에서 만료된 accesstoken으로 서버로 요청을 보낼시
서버는 만료되었다는 어떤 응답을 보내어 클라이언트에서 refreshtoken을 받아 인증된 refreshtoken인지 확인후 새로운 accesstoken을 다시 클라이언트에게 보내준다.

---

## 로그아웃 기능 구현하기 로그아웃은 간단하다. 위의 로그인 방식을 사용했으면 로그아웃 handler로 `localStorage`나 `sessionStorage`에 저장한 `accesstoken`, `refreshtoken`을 지워주고 로그인시에 저장했던 `전역`으로 관리하던 `state`들을 지운다거나 원하는 옵션대로 로직을 구성하면 된다.

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

const LogoutBtn = () => {
    sessionStorage.removeItem('accesstoken');
    localStorage.removeItem('accesstoken');
    localStorage.removeItem('refreshtoken');
  
    navigate('/')
}

로그인, 로그아웃 기능은 브라우저 저장객체인 localStorage, sessionStorage를 사용하여 구현을 해보았다.