개발 환경
- Express 기본 모듈들(express-generator를 통해 설치된 모듈들)
- Express-session
위의 두개만 설치하면 된다.
딱 로그인의 기능만 넣을 것이기 때문이다.
./app.js
Express - session 세팅은 저번 포스팅대로 app.js에 해주면 된다.
즉 모듈을 불러들여서 기본 암호 등을 세팅해주면 끝난다.
./views/login.ejs , logout.ejs
보여줄 view는 2가지이다.
로그인을 위한 페이지, 로그아웃을 위한 페이지의 2가지이다.
먼저 login을 위한 페이지이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Dalkom Login </title> </head> <body> <%-JSON.stringify(session)%> <form action="/login" method="post"> <label for="id"> ID</label> <input id="id" name="id" type="text" placeholder="ID를 입력해주세요"> <br/> <label for="pw"> PW</label> <input id="pw" name="pw" type="password" placeholder="Password를 입력해주세요"> <button type="submit">로그인</button> </form> </body> </html> | cs |
단순하게 아이디와 비밀번호를 입력하는 창과,
지금 세션의 정보를 보여주는 11번 줄의 코드가 있다.
원래 session은 프론트엔드 쪽에선 보이거나 사용하지 못하는 것이 맞지만, 여기선 공부를 위해서 라우터에서 session 정보를 넘겨주었다.
ejs 파일이기 때문에 넘어온 정보를 <%-%>으로 표시한다.
또한 넘어올 때에 JSON Object로 넘어오기 때문에 이를 string화하기 위하여 JSON.stringify 함수를 이용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Dalkom Logout </title> </head> <body> <%-JSON.stringify(session)%> <form action="/logout" method="post"> <button type="submit">Logout</button> </form> </body> </html> | cs |
다음은 logout을 위한 페이지이다.
위와 마찬가지로 10번 줄에 session을 위한 페이지가 있고, 단순히 로그아웃을 위한 버튼만 존재한다.
각각의 사진은 다음과 같다.
위는 로그인 페이지, 아래는 로그아웃 페이지이다.
각각 폼 위에 세션의 정보가 나온다.
세션을 관리하는 것은 라우터에서 할 수 있다.
./routes/index.js
세션을 관리하는 라우터 부분이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | router.get('/login', function(req, res, next){ if(req.session.logined) res.render('logout', {session: req.session}) else { res.render('login', {session: req.session}) } }) router.post('/login', function(req, res, next){ if(req.body.id == 'dalkom' &;;;;;&;;;;; req.body.pw =='itworld') req.session.regenerate(function(){ req.session.logined = true; req.session.user_id = req.body.id; res.render('logout', {session: req.session}) }) }); router.post('/logout', function(req,res,next){ req.session.destroy(); res.redirect('/login') }) | cs |
주소 / login에 접속하면 사용되는 부분이 1~8번 코드이다.
세션에 logined가 true이면 logout 창을 띄우고,
false이면 로그인 창을 띄운다.
이 logined는 10~18번 줄에서 login post를 처리하는 부분에서 관리한다.
11번줄 : 아이디가 dalkom 이고, 비밀번호가 itworld 이면
12번줄 : express-session의 명령어인 session.regenerate를 사용한다.
logined를 true로 바꾸고, user_id를 req.body.id로 바꾼 후에
logout 창을 띄운다.
20번 줄부터는 logout 버튼을 눌렀을때의 처리 구문이다.
보면 알 수 있지만, 각각의 페이지를 열때에는 render를 통해서 ejs 파일에 session 정보를 session이라는 오브젝트 안에 넣어서 보내고 있다.
이렇게 해야 프론트엔드 페이지에서 session 정보를 확인할 수 있다.
끝
따라서 post된 정보를 라우터에서 id와 비밀번호를 확인한 후에, 세션 정보를 본인이 원하는 대로 바꾸고
이를 통해서 정보들을 관리하면 된다.
진짜
끝