[Wetube] 임시데이터를 이용해 Login 이후 구성하기 / middle ware 에 대해

1. 결과물

-

2. 목표

• 로그인에 사용 될 fake data(ID) 를 생성해본다.
• fake data로 로그인 시, USER DETAIL페이지가 users/id 로 나타나도록 한다.
• header.pug를 수정하여 Profile 클릭 시, USER DETAIL로 이동하도록 한다.

3. 코드

middlewares.js

import routes from "./routes";

export const localsMiddleware = (req, res, next) => {
	res.locals.siteName = "Wetube";
	res.locals.routes = routes;
	res.locals.user = {
		isAuthenticated: true,
		id: 1,
	};
	next();
};

middle ware란?

• 익스프레스의 핵심 기능으로, Request objerc, Response object에 접근 후, Next(다음 미들웨어로 넘어가는 구성)를 가진다.
  • middle ware의 기본 구성(req,res,next)
  • 어플리케이션 내에서 순차적으로 실행되어, request, response 객체를 수정하여 해당 작업을 한다.
• 미들웨어는 해당 코드를 실행시키고, 각각의 request/response Cycle을 실행 시킨 후, 다음 미들웨어로 넘어간다.
  • 만약, next()함수를 실행 시키지 않을 경우, 미들웨어는 무한로딩 상태에 빠진다.
  • 모든 미들웨어는 순차적으로 실행된다.
• Express는 미들웨어로, 애플리케이션 생성, 라우터 생성, 에러 처리, 빌트인, ... (모든것을 다 한다..? 익스프레스, 미들웨어s 그 자체..)

-isAuthentificated변수를 사용하여, id의 존재유무를 작성

-id 변수에 값 할당 (id:1)

 

header.pug

header.header
    .header__column
        a(href=routes.home)
            i.fab.fa-youtube
    .header__colunm
        form(action=routes.search, method="get")
            input(type="text", placeholder="Search by term...", name="term")
    .header__colunm
        ul 
            if !user.isAuthenticated
                li
                    a(href=routes.join) Join
                li
                    a(href=routes.login) Log In
            else
                li
                    a(href=`/videos${routes.upload}`) Upload
                li
                    a(href=routes.userDetail(user.id)) Profile
                li
                    a(href=routes.logout) Logout

• isAuthentification 변수를 추가하여 id유/무 확인, if/else구문을 사용
  • 로그인이 안되었을 시, Login,Join 버튼을 보여준다.
  • 로그인이 되었을 시, upload,profile,Logout 버튼을 보여준다.
  • route.js에서 userDetail부분을 함수로 만들었으므로, userDetail()로 변경하여 함수를 실행시킨다.

routes.js (userDetail부분만)

videoDetail: (id) => {
		if (id) {
			return `/videos/${id}`;
		} else {
			return VIDEO_DETAIL;
		}
	}

-id값을 받아옴.

-로그인 시, user/id값 로 이동

 

4. 배운점

1. 분명 공부한 부분인데 미들웨어에 대한 것이 생각나지 않아 정리하였음.

5. 에러 수정

없음