주뇽's 저장소

#9 Auth 기능 추가(ReactJS) 본문

웹개발/React

#9 Auth 기능 추가(ReactJS)

뎁쭌 2023. 1. 8. 18:56
728x90
반응형

본 정리는 인프런 John Ahn 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의를 참고하였습니다.

  • 전체 흐름도스크린샷 2022-12-28 오후 9 15 55

페이지별로 로그인 또는 관리자 확인 필요한경우 체크하기 위해서

  • 서버는 토큰을 데이터베이스에 저장되어 있음
  • 클라이언트는 토큰을 쿠키에 저장되어 있음

인증을 위해서는 중간에 인증처리를 해줄 미드웨어가 필요

  • middleware/auth.js 파일 생성 후 다음 코드 추가
  • const {User} = require("../Models/User");// 미리 정의했던 모델 가져오기 const { request } = require("express"); let auth = (req, res, netx) =>{ //인증 처리를 하는 곳 // 1. 클라이언트에서 토큰을 가져옴 let token = req.cookies.x_auth; // 2. 토큰을 복호화(디코드)한 후 유저를 찾는다. User.findByToken(token,(err, user)=>{ if(err) throw err; if(!user) return res.json({ isAuth : false, error : true }) // 3-1. 유저가 있으면 인증 OK // 3-2. 유저가 없으면 인증 NO req.token = token req.user = user netx(); //미들웨어에서 다음으로 갈 수 있게 }) } module.exports = {auth};
  • 복호화 함수를 정의해야 하므로 User.js파일에 다음 코드 추가
  • userSchema.statics.findByToken = function(token, callbackfunc){ var user = this; // 토큰을 가져와서 복호화 -> 디코드 jwt.verify(token,'secretToken', function(err,deToken){ //유저 아이디를 이용하여 유저를 찾고 클라이언트에서 가져온 토큰과 DB토큰과 비교 user.findOne({"_id":deToken, "token":token}, function(err,userInfo){ if(err) return callbackfunc(err) callbackfunc(null, userInfo) }) }) }
  • index.js 파일 코드 추가
  • app.get('/api/users/auth', auth, (req, res) =>{ // 여기까지 왔다면 auth가 true라는 뜻 res.status(200).json({ _id : req.usrt._id, isAdimn : req.user.role ===0 ? false : true, isAuth : true, email : req.user.email, name : req.user.name, lastname : req.user.lastname, rola : req.user.role, image : req.user.image }) })

'웹개발 > React' 카테고리의 다른 글

#10 로그아웃 기능 만들기(ReactJS)  (0) 2023.01.08
#8 로그인 기능JWS(ReactJS)  (0) 2023.01.08
#7 Bcrypt로 비밀번호 암호화(ReactJS)  (0) 2023.01.08