로그인 (4) 썸네일형 리스트형 리액트 JWT 로그인 및 로그인 유지(유저 인증) 방법 프로젝트가 막바지로 접어들고 있는데 드디어 로그인 및 로그인 유지 기능을 구현했다. 사실 로그인 기능은 개념이 그렇게 어렵지 않다. 1. 회원가입을 통해 서버에 유저 정보를 심어둔다. 2. 로그인을 통해 입력한 유저 정보가 서버에 존재하는지 확인한다. 3. 입력한 유저 정보가 서버에 존재한다면 토큰을 반환한다. 4. 반환받은 토큰을 가지고 인증을 유지한다. 5. 서버에 요청할 때 토큰을 첨부하면 해당 토큰을 이용해 유저를 인증한다. 오늘 게시글에서는 회원가입은 미뤄두고 나머지 기능들을 알아보려고 한다. 우선 로그인 하는 방법은 어렵지 않다. let body = { username: id, password: password }; axios .post("http://localhost:8080/users/lo.. 리액트에서 axios로 POST 요청할 때 401 오류 해결 후기(feat : object형 데이터 사용 오류) ReactJS와 NestJS를 이용하여 프로젝트를 제작중인데 로그인 기능 구현 도중 오류를 만났다. axios를 이용해 id정보와 password 정보를 서버로 post 했는데 브라우저에서 401 오류를 반환한 것이다. 오류 해결을 위해서 구글링을 진행했고 이런 저런 해결 방법들을 찾아 시도해보았지만 해결이 불가능했다. 1시간 가량을 삽질하던 중 object형 데이터에서 key와 value가 같다면 value만 적어도 된다는 글을 발견했다. // 이 코드를 let body = { username: id, password: password }; // 이렇게 바꿀 수 있다. let body = { id, password }; 참고로 로그인관련 코드를 구글링하면서 만들고 있었는데 내 원래 코드는 아래와 같았다.. nodejs에서 mypage 구현하기 1. 개요 회원가입이랑 로그인 기능 구현했으니까 mypage에 접속할 수 있도록 만들고 싶음 mypage는 회원 정보를 바탕으로 로그인 한 회원의 개인정보가 담긴 페이지를 보여줌 2. 코드 (1) mypage.ejs mypage.ejs파일 만들어줍시다 의 마이페이지입니다 적당히 꾸며주시면 됩니다 (2) server.js // 로그인한 유저의 세션 아이디를 이용해 DB에서 개인정보 찾아주는 코드(개인 정보 페이지 접속시 실행) // db에서 유저 아이디를 이용해서 유저를 찾고, 유저 정보를 done(null, 결과)에전달해줌 // 참고로 '아이디'라는 변수는 serializeUser코드의 'user.id'변수에 들어있는 값과 동일 passport.deserializeUser(function (아이디, do.. nodejs에서 Session-based 회원가입 구현하기 1. 개요 회원가입 기능의 방식에는 크게 3종류가 있음 3가지 방식 모두 장단점이 있으며 우리가 흔히 아는 소셜 로그인 기능은 OAuth방식임 2. 방식 (1) Session-based 브라우저에서 로그인 시 서버에 유저의 로그인 기록 저장 서버에서는 유저의 로그인 기록을 세션 아이디로 만들어서 쿠키 발행 브라우저는 전달받은 쿠키(세션 아이디가 포함되어 있음)를 저장함(로그인을 한 상태) 만약 로그인 해야만 볼 수 있는 페이지(개인정보 페이지 등)를 서버에 요청한다면? 요청과 함께 쿠키가 서버로 전송됨 서버에서는 쿠키에 들어있는 세션 아이디를 서버의 로그인 기록과 대조 함 그 뒤에 서버에서 브라우저로 개인정보 페이지를 보내줌 이 방식은 로그인 상태를 서버에 저장하는 게 특징(서버의 자원을 소모함) (2).. 이전 1 다음
