Node.js 3차 미니프로젝트 로그인 & 로그아웃

Node.js 3차 미니프로젝트 로그인 & 로그아웃

---

로그인

 

📄 app.js

const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

 

 

📄 routes/signup.route.js

const express = require("express");
const router = express.Router();

const SignupController = require('../controllers/signup.controller');
const signupController = new SignupController();

router.post('/', signupController.postSignup);


module.exports = router;

 

📄 controllers/login.controller.js

const LoginService = require('../services/login.service');

class LoginController {
    loginService = new LoginService();

    postLogin = async (req, res, next) => {
        try{
            const { email, password } = req.body;

            const userId = await this.loginService.findOne(email, password);

            const token = await this.loginService.issueToken(userId);
            res.cookie('token', token['token']);
            res.status(200).json({
                result: "success",
                token: token,
            });
        } catch(err) {
            res.status(400).json({
                errorMessage: "로그인에 실패하였습니다."
            });
        }
        
    }

}

module.exports = LoginController;

JWT 개념상 서버에서 토큰을 발해야하므로 Service에서 토큰을 발행하도록 코드를 구성했다.

발급받은 토큰을 client 쿠키에 저장하게 하는 코드는 생각보다 단순했다.

res.cookie('token', token["token"]);

Bearear 앞에 붙은 토큰값은 원하지 않으면 다음과 같이 value값만 전달해주면 된다. 

 

토큰값을 전달하고 client에서 쿠키에 저장하도록 코드를 구현도 가능하다.

 

📄 login.html

$.cookie("mytoken", response.token["token"], { path: "/" });

 

📄 services/login.service.js

const jwt = require('jsonwebtoken');

const UserRepository = require('../repositories/users.repository');

class LoginService {
    userRepository = new UserRepository();

    findOne = async(email, password) => {
        const findUser = await this.userRepository.findOne(email, password);

        return{
            userId: findUser.userId
        }
    }

    issueToken = async(userId) => {
        const token =jwt.sign({ userId: userId },
            process.env.SECRET_KEY,
            { expiresIn: "1d" }
            );

        return{
            token: token 
        }
    }

}

module.exports = LoginService;

토큰 발행할때 userId 값만 필요하므로 findone에 userId값만 전달하게 코드를 짰다.

 

📄 repositories/users.repository.js

const { User } = require("../models");

class UserRepository {

    createUser = async(userType, email, phoneNumber, password, name, address, point) => {
        const createUserData = await User.create({ userType, email, phoneNumber, password, name, address, point });

        return createUserData;
    }

    findOne = async(email, password) => {
        const findUser = await User.findOne({
            where: {email, password}
        });

        return findUser;
    }

}

module.exports = UserRepository;

 

users 테이블 로그인 정보

jwt.io

---

📄 templates/login.html

<!--    JQuery Cookie-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>
    // 로그인 실행
    function loginEvent() {
        const email = $('#email').val()
        const password = $('#password').val()
        $.ajax({
            type: "POST",
            url: "/api/login",
            data: {email, password},
            success: function (response) {
                // 개발자도구 application - cookie에서 확인 가능
                $.cookie("mytoken", response.token["token"], { path: "/" });
 
                alert(response.token["token"]);
                // location.href = "/"
            },
            error: function (error) {
                alert(error.responseJSON.errorMessage)
            },
        });
    }
</script>

html로 구성하는게 너무 어려웠다. ㄷㄷㄷ

이렇게 구현하니, 서버 헤더 위치에 "token" 키값으로 발급받은 토큰값이 들어간 cookie가 생성되었다.

 

mytoken 키값의 토큰 생성

 

---

로그아웃

 

📄 templates/main.html

<!--    JQuery Cookie-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>


<script>

    $(document).ready(function () {
        // 토큰이 있을 경우 로그인 기능 hide
        const token = $.cookie("mytoken");
        if (token) {
            $('#btn_login').hide();
            $('#btn_logout').show();
        } else {
            // 토큰이 없을 경우 게시글 작성 hide
            $('#btn_login').show();
            $('#btn_logout').hide();
        }
    });

    function logout() {
        $.removeCookie("mytoken", { path: "/" });
        // localStorage.removeItem('token')
        // localStorage.clear();
        window.location.href = '/api';
    }

</script>

↓

    if (document.cookie) {
      $.ajax({
        type: 'GET',
        url: '/api/users/me',
        data: {},
        success: function (response) {
          // alert(response.user.userType);
          if (response.user.userType === 1) {
            location.href = '/api/laundry'; // 사용자 페이지로 이동
          } else if (response.user.userType === 0) {
            location.href = '/api/bosswork'; // 사장 페이지로 이동
          }
        },
      });
    }

 

로그인_로그아웃