리액트 노드 쿠키사용하여 로그인 로그아웃

리액트 ==> yarn add react-cookie

리액트 ==> yarn add jwt-decode

노드 ==> npm i jsonwebtoken

export async function getLogin(req, res) {
  const { id, pass } = req.body;
  const result = await memberRepository.getLogin(id);
  result.login_result = false ;
  let token = null;
  if (result.cnt === 1) {
    if (await bcrypt.compare(pass, result.pass)) {
      result.login_result = true // 로그인 성공
      // jwt 토큰 생성
      token = jwt.sign({id : id},'I50f?FzL04`2L');
      result.token = token
      console.log(`result ----> ${(result)}`);
    } 
  } 
  //console.log(result);
  // res.json({result,token}) // 토큰 전송
  res.json(result) // 토큰 전송
};

import jwt from 'jsonwebtoken'; import 후

링크텍스트

암호화 하기위해 해당사이트에서 Customize your password 받아오고

token = jwt.sign({id : id},'I50f?FzL04`2L');

토큰을 result에 오브젝트 형태로 저장후 json형태로 전송

src 안에 util이라는 폴더 생성후 cookie값을 컨트롤할 파일과

localStrage 파일 생성후

cookie.js에서

import { Cookies } from "react-cookie";

const cookies = new Cookies();

export const setCookie = (name, value, option) => {
  return cookies.set(name, value, option);
} //쿠키 생성

export const getCookie = (name) => {
  return cookies.get(name)
} // 쿠키를 가져옴

export const removeCookie = () => {

} // 쿠키 삭제

쿠키값을 이용할 코드 생성

	import { setCookie } from '../util/cookie';
	import { jwtDecode } from 'jwt-decode';

     if (result.data.login_result) {
          console.log(result.data.token);
          alert('로그인 성공')
          //토큰을 쿠키에 추가
          setCookie("x-auth-jwt",result.data.token)
          //토큰에 추가된 id 추출(토큰디코딩 : jwt-decode)후 로컬스토리지에 저장
          const userInfo = jwtDecode(result.data.token);
          localStorage.setItem("userInfo" , JSON.stringify(userInfo))
          navigate("/")
          
        }

import { Cookies } from "react-cookie"; 임포트후 함수 생성

생성한 setCookie함수와 jwtDecode 임포트 후

로그인 생성시 setCookie("x-auth-jwt",result.data.token) 토큰 생성

토큰에 추가된 id 추출(토큰디코딩 : jwt-decode)후

JSON.stringify 사용하여 문자형 데이터로 로컬스토리지에 저장

import { getCookie, removeCookie } from "./cookie";

export const getUser = () => {
  let userInfo = localStorage.getItem('userInfo') && getCookie('x-auth-jwt')
    ? JSON.parse(localStorage.getItem('userInfo'))
    : null

  return userInfo
}

export const removeUser = () => {

}

localStirage.js에서 로컬스토리지에 userInfo와 쿠키에 x-auth-jwtrk 가 있을경우 로컬스토리지에 있는 userInfo를 리턴하는 getUser 함수 생성

다른 파일에서 사용하는법은 import { getUser } from "../util/localStorage";
임포트 후

{getUser() ?
         <>
           <Link to='/products'>Products</Link>
           <Link to='/carts'>Cart</Link>
           <Link to='/products/new'><BsFillPencilFill />NewProducts</Link>
           <button type="button">Logout</button>
         </>
         :
         <>
           <Link to='/products'>Products</Link>
           <Link to='/login'><button>Logint</button></Link>
         </>
       }

getUser() 정보가 있으면 로그아웃으로 보이고 없으면 로그인으로 보이는 코드 생성

로그아웃 기능

  const handleLogout = ()=>{
    removeUser();
    navigate(`/`);
  }

버튼 클릭시 removeUser(); 호출

export const removeUser = () => {
  removeCookie('x-auth-jwt');
  localStorage.clear();
}

쿠키값과 로컬스토리지 비움