웹개발 - 4 패스워드 해싱/로그인/로그아웃

이다.

사실 Passport.js를 사용하니까 세션 유지랑 로그아웃 기능을 구현하기는 어렵지 않았다.

아무튼 그래서 수정된 코드들은 이렇다.

User 모델이 Passport.js를 플러그인으로 사용하고 있어 Passport.js에서 제공하는 register 메소드를 사용해서 회원가입 로직을 구현했다. (여기서 뭔가 잘못됐는지 잘 안되는 점이 있는데 밑에서 다시 설명하겠음)

암튼 저렇게 회원가입을 진행하면, 패스워드 값에 대하여 솔트와 해싱값이 자동으로 저장된다.

그리고 로그인/로그아웃 로직이다.

여기서도 Passport.js를 사용하여 로그인과 로그아웃을 간단하게 코드 몇줄로 구현했다.

로그인 로그아웃 기능은 잘 된다.

그리고 이제 로그인이 유지되고 있음을 보여주기 위해서 네비게이션바를 수정하였다.

그 전에 현재 세션에 있는 사용자 정보를 받아오기 위해서 main.js의 미들웨어 함수에 변수를 정의한다.

이렇게 Passport.js에서 제공하는 isAuthenticated() 메소드를 이용하여 로그인이 되어있는지 아닌지 true/false값을 loggedIn 변수에 저장하고, 로그인이 되어있다면 로그인 된 사용자의 정보를 currentUser 변수에 저장한다.

그리고 이건 이제 flashMessages 처럼 뷰에서 갖다쓸 수 있게 된다.

그래서 layout.ejs를 아래와 같이 수정해서 로그인이 안되어있을 때는 login / register 가 뜨게 하고,

로그인이 되어있으면 현재 로그인 된 사용자의 이름을 보여주고 로그아웃할 수 있도록 메뉴를 띄워준다.

그리고 수정된 에러페이지는 이렇게 생겼다.

수정 및 구현한 기능의 실행영상이다.

그리고 이제 고치지 못한 문제는, 회원가입을 할때 DB에 사용자가 입력된 값은 저장이 되는데

회원가입이 완료되고 나서 index 페이지로 리다이렉션이 이뤄지지 않는다. 그래서 if문과 else문 각각에 코드에 콘솔 로그를 찍어봤는데

보다시피 if문과 else문 둘다에 들어가는 것 같다. 왜 이러는지 모르겠다. 이거 고치고, Validator가 작동하게 하면

회원가입/로그인/로그아웃 기능은 완벽하게 구현이 끝난다. 후...

(+ 2021.11.10 17:30 수정)

생각보다 큰문제가 아녔다...ㅋ 역시 맨날 코딩할 땐 자잘한 실수 때문에 이렇게 된다.

암튼 문제는 걍 main.js 에서 register에 매핑할때 redirectView 액션까지 매핑을 안해줘서 그런거였다...^^

이렇게 추가해주고 회원가입 다시 진행해보니까

잘된다ㅋㅋㅋ

이제 Validator만 하면 된다!!

LIST

hayeoniee's archive 🧸💡📜