[TIL] 내일배움캠프 1.5

프로젝트에서 로그인 여부와 로그인 한 유저의 타입에 따른 페이지 이동 제한과 헤더 디자인 핸들링을 해야하는 작업이 있어서 고민을 하게 되었다.

이번 프로젝트에서는 EJS 템플릿 엔진으로 View를 구성하고 있고, index.ejs 에서 React 처럼 컴포넌트들을 바꿔가며 랜더링한다.

그러면 로그인 여부와 유저의 타입에 따라 페이지를 들어갈 수 있게, 못들어 가게 하려면 어떻게 해야할까?

우리는 로그인 여부를 처리하는 Auth Middleware를 구현 해놓았다.

이 미들웨어를 페이지 주소와 매핑되어 컴포넌트를 Render 해주는 라우터에 걸어서 로그인 여부를 판단하면 된다.

• Auth Middleware

module.exports = async (req, res, next) => {
    try {
        const accessToken = req.cookies.accessToken;

        // 토큰이 없을때
        if (!accessToken) {
            res.locals.user = {};
            return next();
        }
        const { userId, type } = jwt.verify(accessToken, 'my-secrect-key');

        if (type === 'customer') {
            const customer = await Customer.findOne({
                where: { customerId: userId },
            });
            const point = customer.point;
            const name = customer.name;

            res.locals.user = { userId, type, point, name };
            next();
        } else {
            const driver = await Driver.findOne({
                where: { driverId: userId },
            });
            const name = driver.name;

            res.locals.user = { userId, type, name };
            next();
        }
    } catch (error) {
        console.log(error);
        // 쿠키를 지워야 할 것 같다.
        res.clearCookie('accessToken');
        return res.status(500).json({ message: error });
    }
};

Cookie에 담겨져 있는 Token을 읽어오고 유저의 정보를 찾는다.
그리고 그 유저의 타입을 가져와 locals에 저장 한 후 next()로 빠져 나온다.

• ejs.router.js

router.get("/driver", authMiddlewares, (req, res) => {
  // 로그인이 되어있지 않다면?
  if (!res.locals.user) {
    return res.render("index.ejs", {
      components: "driver",
      user: res.locals.user,
    });
  }
  // 로그인이 되어있는데 유저의 타입이 customer이면?
  if (res.locals.user.type === "customer") {
    return res.redirect("/customer");
  }
  console.log(res.locals.user);
  res.render("index.ejs", { components: "driver", user: res.locals.user });
});

미들웨어를 거치고 저장한 유저의 정보를 바탕으로 페이지 핸들링을 한다.