[유튜브 클론코딩] 2.24 Log In and User Profile Controller

2.24 Log In and User Profile Controller

Login 화면 만들기

Login도 비슷한 작업을 해야하므로 이전의 login은 getLogin으로 이름을 바꾸고 postLogin 함수를 만든다.

 

login에는 할 일이 많지는 않다. 로그인을 하면 그냥 로그인 버튼만 클릭하는 것이다.

만약 로그인에 성공했다면 routes.home으로 redirect하면 돼. join의 흐름과 같지.

 

export const getLogin = (req,res) => res.render("login", {pageTitle: "Login"});

export const postLogin = (req,res) => {

    res.redirect(routes.home);

}

↑ userController.js

나중에는 사용자 비밀번호가 데이터베이스에 있는 것과 같은지 검사해야하는데, 지금은 일단 그냥 redirect 한다. 그리고 마찬가지로 globalRouter.js도 getLogin, postLogin을 수정해준다.

 

로그인이 되었을 때 화면/ 로그인이 안되었을 때 화면 구현하기

middlewares.js에서 res.locals.user에 isAuthenticated: true가 담긴 객체를 입력한다.

import routes from './routes';

export const localsMiddleware = (req, res, next) => {

    res.locals.siteName = "MyTube";

    res.locals.routes =  routes;

    res.locals.user = {

        isAuthenticated: true,

        id: 1

    }

    next();

};

↑ middlewares.js

이건 존재하지 않는 가짜 정보이다. 실제 사용자 정보가 있으면 대체될 코드이다.

user.isAuthenticated라는 것은 사용자가 로그인을 했을 때를 나타내는 변수인 것이다.

 

이제 header를 수정해주어야 한다.

user.isAuthenticated가 false라면 join, login을 보여주고 user.isAuthenticated가 true라면 upload, profile, logout을 보여주는 것이다.

 

header.header

    .header__column

        a(href=routes.home)

            i.fab.fa-youtube

    .header__column

        form(action=routes.search, method="get")

            input(type="text", placeholder="Search by term...", name="term")

    .header__column

        ul

            if !user.isAuthenticated

                li

                    a(href= routes.join) Join

                li

                    a(href= routes.login) Log In

            else

                li

                    a(href= routes.upload) Upload

                li

                    a(href= routes.userDetail) Profile 

                li

                    a(href= routes.logout) Logout                   

↑ header.pug

 

 

/users/:id와 /videos/:id 수정하기

그리고 문제가 하나 있다.

profile 링크를 누르면, /:id 주소로 이동한다. 이렇게가 아니라 이 링크를 클릭하면 id가 포함된 주소로 가도록 하고싶다.(예: 아이디가 zz123이라면 /users/zz123으로 이동하도록)

routes를 수정해야한다. express는 이해하지만, html은 저 routes를 이해하지 못하기 때문이다.

id가 url에 들어가도록 수정할 것이다.

 

const routes = {

    home: HOME,

    join: JOIN,

    login: LOGIN,

    logout: LOGOUT,

    search: SEARCH,

    users: USERS,

    userDetail: (id) => {

        if(id){

            return `/users/${id}`;

        }else{

            return USER_DETAIL;

        }

    },

    editProfile: EDIT_PROFILE,

    changePassword: CHANGE_PASSWORD,

    videos: VIDEOS,

    upload: UPLOAD,

    videoDetail: VIDEO_DETAIL,

    editVideo: EDIT_VIDEO,

    deleteVideo: DELETE_VIDEO

};

routes.js에서 userDetail을 함수 식으로 바꾼다. 이 함수는 id를 인자로 입력받는다. 만약 id가 있다면 /users${id}를 리턴하자

 

import express from "express";

import { changePassword,

        editProfile,

        userDetail,

        users } from '../controllers/userController';

import routes from "../routes";

const userRouter = express.Router();

userRouter.get(routes.editProfile, editProfile);

userRouter.get(routes.changePassword, changePassword);

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



export default userRouter;

userRouter도 수정해야한다. 이렇게 선언만 하면 안되고 함수를 실제로 실행해야하기 때문이다. 이 경우에는 id를 인자로 해서 실행하지 않으니까 /:id를 리턴받을 것이다.

 

 

header.header

    .header__column

        a(href=routes.home)

            i.fab.fa-youtube

    .header__column

        form(action=routes.search, method="get")

            input(type="text", placeholder="Search by term...", name="term")

    .header__column

        ul

            if !user.isAuthenticated

                li

                    a(href= routes.join) Join

                li

                    a(href= routes.login) Log In

            else

                li

                    a(href= routes.upload) Upload

                li

                    a(href= routes.userDetail(user.id)) Profile 

                li

                    a(href= routes.logout) Logout     

↑header.pug

하지만 템플릿에서는 인자 없이 실행하면 안돼 user.id를 인자로 입력하자!

 

이제 실행하면, 홈 화면에서 profile링크를 눌렀을 때 localhost:4000/users/1로 이동하게 되고 userDetail 홈페이지가 잘 보이는 것을 알 수가 있다.

 

videoDetail도 수정한다.

 

const routes = {

    home: HOME,

    join: JOIN,

    login: LOGIN,

    logout: LOGOUT,

    search: SEARCH,

    users: USERS,

    userDetail: (id) => {

        if(id){

            return `/users/${id}`;

        }else{

            return USER_DETAIL;

        }

    },

    editProfile: EDIT_PROFILE,

    changePassword: CHANGE_PASSWORD,

    videos: VIDEOS,

    upload: UPLOAD,

    videoDetail: (id) =>{

        if(id){

            return `/videos/${id}`;

        }else{

            return VIDEO_DETAIL;

        }

    },

    editVideo: EDIT_VIDEO,

    deleteVideo: DELETE_VIDEO

};

↑ routes.js