본문 바로가기

JavaScript

Node.js 3차 미니프로젝트 middleware, local Storage

728x90

Node.js 3차 미니프로젝트 middleware, local Storage


📄 middlewares/auth-middleware.js

const jwt = require('jsonwebtoken');

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

module.exports = (req, res, next) => {
    const token = req.cookies.token;
    console.log(token);

    if(!token){
        res.status(401).send({
            errorMessage: "로그인 후 이용해 주세요."
        });
        return;
    }

    try {
        const { userId } = jwt.verify(token, process.env.SECRET_KEY);

        const id = userId.userId;
        console.log(id);

        User.findByPk(id).then((user) => {
            res.locals.user = user;
            // console.log(user);
            next();
        });
    } catch (err) {
        res.status(401).send({
            errorMessage: "로그인 후 이용해 주세요.222"
        });
    }
};

 

📌 에러

<rejected> Error: Argument passed to findByPk is invalid: [object Object]

 

알고보니  User.findByPk(7) 이렇게 숫자(id)만 들어가야 했다!


local Storage 회원정보 저장

 

로그인한 뒤, Client Header Cookie에 토큰 값을 확인 한 후, 바로 main페이지로 이동!

 

 

📄 routes/index.js

// authMiddleware 
router.get("/users/me", authMiddleware, async (req, res) => {

  res.json({ result: "success" , user: res.locals.user });

});

/users/me 를 이용해 local Storage에 현재 로그인한 회원 정보가 저장되도록 한다.

 

 

📄 main.ejs

    $(document).ready(function () {
        // 토큰이 있을 경우 로그인 기능 hide & 페이지 이동
        const token = $.cookie("token");
        if (token) {
            $('#btn_login').hide();
            $('#btn_logout').show();

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

        } else {
            // 토큰이 없을 경우 
            $('#btn_login').show();
            $('#btn_logout').hide();
        }
    });

유저 타입에 따라 사용자페이지& 사장페이지로 이동하도록 했고.

로그아웃 기능은 모든 페이지에 적용해야 할 사항이라, 구현 코드만 main page에 적어놨다.