NodeJS React환경에서 로그인 기능(쿠키) 구현하기

서버 part

---

npm i jsonwebtoken

npm i  bycryptjs

//repository
import { db } from "../db/database.js";

export async function getLogin(id){
    return db
    .execute(`SELECT count(pass) as cnt,any_value(pass) as pass FROM shoppy_member WHERE id = ?`,[id])
    .then((row)=>{
        return row[0][0]
    })
}

id에 따른 비밀번호 값과 count(pass)값을 따온다 count(pass)는 행의 수 이므로 1이면 아이디가 있고 0이면 아이디가 없다고 분류할 예정임

//controller
import * as loginRepository from '../repository/loginRepository.js'
import bcryptjs from 'bcryptjs'
import jwt from 'jsonwebtoken'
export async function getLogin (req,res){
const {id,pass} = req.body
const row =  await loginRepository.getLogin(id)
row.login_result = false
let token = null
if(row.cnt === 1){ //아이디체크 cnt를 써서 0이냐 1이냐를 비교해서 id 유무체크부터 해야함
    const hashPass = row.pass 
  if(await bcryptjs.compare(pass,hashPass)){
//로그인성공(아이디도맞고비번도맞음)jwt토큰생성
const token = jwt.sign({id:id},`0V}E6e37O?aA`); //lastPass라는 사이트 참조,토큰만들기
row.token = token; //결과값에 token을 넣어준다
row.login_result = true; //로그인결과값도 넣어준다(꼭안넣어도 될것같음) 
console.log(row);//check된 id랑 pass값에 token과 result값도 넣어졌는지확인

  }else{
//비번틀림

  }
}else{
//아이디없음

}
res.json(row) //토큰 전송 (위 값을 전송)
}

---

---

프론트 part

---

npm i jwt-decode

npm i react-cookie

//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,value,option)=>{
    return cookies.get(name)
}

export const removeCookie = (name,value,option)=>{
    return cookies.remove(name)
}

쿠키라는 자바스크립트파일을 만들어서 set(만들기) ,get(찾기,쿠키유무에따른 렌더링에사용),remove(삭제)

//로그인페이지
  const onValid = (data)=>{
axios.post(`http://127.0.0.1:8080/login`,data)
.then((res)=>{
  if(res.data.login_result){
   
    //토큰을 쿠키에 추가
    setCookie('chickenMaster',res.data.token)// 쿠키이름설정,서버에서가져온토큰뿌리기
    //토근에 추가된 id추출(토큰 디코딩,)
    const userId = jwtDecode(res.data.token); 
    console.log(userId);
    localStorage.setItem("info",JSON.stringify(userId))
    navigate('/')
  }
} )
.catch((err)=>{console.log(err);})
    }

토큰을 쿠키설정흘 함과동시에 로컬스토리지에 id값 역시 저장해준다.

둘 다 존재하는 경우에만 로그인 후 사용자 페이지를 렌더링 할 예정이다.

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


export const getUser = ()=>{
    let userInfo = (localStorage.getItem('info') && getCookie('chickenMaster')) ? JSON.parse(localStorage.getItem('info')) : null
    return userInfo;
}

export const removeUser = ()=>{
    removeCookie('chickenMaster')
    localStorage.removeItem('info')
}

로컬스토리지와 쿠키를 요청하고 제거하는 파일임

로컬스토리지 get과 remove는 따로 저장을 해두고 쿠키와 로컬스토리지를 모두 get 할 수 있을때 로컬스토리지를 파싱한다. 

  //navbar
  
  const handleLogout = ()=>{
    removeUser()
    navigate('/')
}
                    {getUser() ? (<div>
                    <Link onClick={handleLogout} to='/login'><span>{getUser()?.id}님 ㅎㅇ여</span><span>로그아웃</span></Link>
                    <Link to='/cart'><span>Cart</span></Link>
                    <Link to='/new'><span><FaPencilAlt/></span></Link>
                    <Link to='/signup'><span>Sign up</span></Link>
                    <Link to='/chat'><span>상담</span></Link></div>) : (
                        <div><Link to='/login'><span>로그인</span></Link>
                        <Link to='/signup'><span>Sign up</span></Link>
                        <Link to='/chat'><span>상담</span></Link></div>
                    )}

삼항연산자사용해서 getuser의 유무

---

문제점

 

broken acess control 이슈가 있음

https://owasp.org/www-project-top-ten/

OWASP Top Ten | OWASP Foundation

php개발한 사이트에서도 많이 발견이 됨, 해결방법은 ?

https://tacoding.tistory.com/110

2023.11.17+ broken acess control 리액트 해결