<Express.js> login form

join form에 이어서 login form을 만들어보도록 하겠습니다.

login.pug

login도 비밀이 유지되어야 하는 form 이기 때문에 method를 post로 하겠습니다.

extends layouts/main

block content
    .form-container
        form(action=routes.login, method="post")
            input(type="email", name="email", placeholder="Email")
            input(type="password", name="password", placeholder="Password")
            input(type="submit",value="Log In")
        include partials/socialLogin

userController.js

post method를 갖는 login 페이지로의 요청에 대한 응답을 하기 위해서 controller의 코드를 변경해줍니다. 기존 login 함수를 getLogin과 postLogin으로 나누어줍니다.

import routes from '../routes';

export const getLogin = (req, res) => {
	res.render("login");
}
export const postLogin = (req, res) => {
	const {body : {email, password}} = req;
  	if(true){
      res.redirect(routes.home);
    }
  	res.render("login")
}

postLogin함수에서 if(true)라고 표현한 부분은 정상적이라면 데이터베이스를 통해 id 와 password가 맞는지 확인해야겠죠. 아직 데이터베이를 구성하지 않았기 때문에 무조건 로그인에 성공하도록 if(true)라고 해주었습니다.
성공하게 되면 home으로 redirect해서 마무리 합니다.

userRouter.js

controller에서 두개의 함수로 나누어주었고 이제는 router에서 요청 method에 따라 다른 함수를 실행해주어야죠.

/*userRouter.get(routes.login, login);*/
userRouter.get(routes.login, getLogin);
userRouter.post(routes.login, postLogin);

탬플릿

header.pug

기존에 우리가 구성했던 header는 login, join으로 메뉴가 이루어지는데요. 로그인을 한 유저에게도 같은 화면을 보여줄 수 없겠죠? 그래서 로그인 여부를 기준으로 nav를 다르게 만들어봅시다. pug는 if문을 아래처럼 사용할 수 있습니다.

header.header
	/*생략*/
	.header__column
		nav
			ul
				if(user.isAuthenticated)
					li
						a(href=`${routes.videos}${routes.uploadVideos}`
					li
						a(href=routes.userDetail(user.id)) Profile
					li
						a(href=routes.logout) Logout
				else
					li
						a(href=routes.login) Login
					li
						a(href=routes.join) Join

위의 코드에서 두가지가 중요합니다.

• user.isAuthenticated
  user.isAuthenticated에 따라서 li의 내용과 개수가 다르구요. user.isAuthenticated는 모든 페이지에서 사용되기 때문에 뒤에서
  middleware를 이용해서 전역변수로 주도록 하겠습니다.
• routes.userDetail(user.id)
  원래 routes.userDetal은 함수가 아니라 그냥 "/users/:id"를 담고 있었는데요. :id를 express는 변수로 생각하지만 javascript는 그렇지 않기 때문에 아래 routes.js에서 이걸 함수로 바꿔 id에 따라서 다른 페이지를 보여주도록 하겠습니다.

middleware

아직은 데이터베이스가 없으므로 user데이터를 가짜로 만들어서 전역변수로 주겠습니다.

export const localsMiddleware = (req, res, next) =>{
  /*다른 변수 생략*/
	res.locals.user = {
      id: 1,
      isAuthenticated: truel,
    };
}

routes.js

userDetail이라는 함수를 id에 따라 두 가지 반환값을 갖도록 할건데요.
id값이 전달됐으면 /users/${id}
id값이 전달되지않았으면 /:id 를 전달하게 됩니다.

const routes = {
  	/*생략*/
	userDetail: id => {
      if(id){//만약 id가 전달됐으면 
        return `/users/${id}`;
      }else{// id가 전달되지 않았으면 
      	return USER_DETAIL;
      }
    }
}

userRouter.js

routes의 userDetail을 함수로 변경했기 때문에 userRouter도 변경되는 부분이 있습니다. express는 :id를 변수로 받아들이기때문에 router에서는 id를 따로 전달해주지 않습니다.

/*userRouter.get(routes.userDetail, userDetail);*/
userRouter.get(routes.userDetail(), userDetail);

이렇게 해서 login-form 구성을 마무리 하겠습니다. 데이터베이스를 구축한 뒤에 실제 데이터 베이스를 연결하여 완료하겠습니다.