Express.js] 경로 필터링

아래와 같이 공통의 경로(/admin)를 포함하는 라우터가 있다고 하자.

// admin.js
const express = require("express");

const router = express.Router();

// /admin/add-product <- GET
router.get("/admin/add-product", (req, res, next) => {
  res.send(
    '<form action="/add-product" method="POST"><input type="text" name="title"><button>Add Product</button></form>'
  );
});

// /admin/add-product <- POST
router.post("/admin/add-product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/");
});

module.exports = router;

 

둘 다 /admin/add-product라는 url 요청에 응답하지만

get과 post 방식의 접근으로 구분되므로 다른 라우터이다.

 

이때 라우터 내부에서는 공통의 경로를 삭제하고

아래와 같이 app.js의 미들웨어에서 공통경로를 지정해줄 수 있다.

 

app.use('/admin', adminRoutes);

 

전체코드

// app.js
const express = require("express");
const bodyParser = require("body-parser");

const app = express();

const adminRoutes = require("./routes/admin");
const shopRoutes = require("./routes/shop");

app.use(bodyParser.urlencoded({ extended: false }));

app.use('/admin', adminRoutes);
app.use(shopRoutes);

app.use((req, res, next) => {
    res.status(404).send('<h1>Page not found</h1>')
})

app.listen(3000);

// admin.js 아래 경로에서 /admin 삭제

const express = require("express");

const router = express.Router();

// /admin/add-product <- GET
router.get("/add-product", (req, res, next) => {
  res.send(
    '<form action="/add-product" method="POST"><input type="text" name="title"><button>Add Product</button></form>'
  );
});

// /admin/add-product <- POST
router.post("/add-product", (req, res, next) => {
  console.log(req.body);
  res.redirect("/");
});

module.exports = router;

url에 /admin이 자동으로 붙는다.

요청을 날려보면

404페이지로 연결된다.

form 태그는 여전히 /add-product로 연결하고 있기 때문이다.

아래 코드로 수정 후 다시 요청을 보내보면

router.get("/add-product", (req, res, next) => {
  res.send(
    '<form action="/admin/add-product" method="POST"><input type="text" name="title"><button>Add Product</button></form>'
  );
});

 

정상적으로 요청이 처리되었다.