게시판 페이지 만들기 #4 - 검증 미들웨어, 게시판 웹 페이지 빌드

이제 게시판 관련된 기능들을 구현해보자.

 

게시판에 꼭 필요한 페이지는 글 리스트, 글 보기, 글 쓰기, 글 수정 페이지 4개 정도가 있는데,

 

각각의 라우터와 미들웨어를 작성해준다.

 

지난 번 user의 라우터를 분리한 것과 동일한 방법으로 작성해주면 된다.

 

 

1. 라우터, html 작성

/*  front/routes/index.js  */

const express = require('express')
const router = express.Router()
const userRouter = require('./user/index.js')
const boardRouter = require('./board/index.js') // 추가

router.use('/user', userRouter)
router.use('/board', boardRouter)  // 추가

module.exports = router

/*  front/routes/board/index.js  */

const express = require('express')
const router = express.Router()
const app = express()
const boardController = require('./boardController.js')

router.get('/list', boardController.list)
router.get('/view', boardController.view)
router.get('/write', boardController.write)
router.get('/modify', boardController.modify)

module.exports = router

/*  front/routes/board/boardController.js  */

exports.list = (req,res)=>{
    res.render('board_list.html')
}

exports.view = (req,res)=>{
    res.render('board_view.html')
}

exports.modify = (req,res)=>{
    res.render('board_modify.html')
}

exports.write = (req,res)=>{
    res.render('board_write.html')
}

 

각 html은 지금은 그냥 만들고 어떤 페이지인지만 대충 써두자.

 

여기까지 한 후 파일 배치는 다음과 같다.

 

2. 검증 메커니즘 빌드

 

각각의 게시판 웹 페이지들을 작성하기 전에

 

우선 인증된 사용자만이 게시판 페이지에 접속할 수 있도록 검증 미들웨어를 작성하자.

 

1. 사용자가 접속을 시도할 경우, 검증 미들웨어가 실행된다. 

 

2. 검증 미들웨어에선 사용자가 가진 쿠키를 가져와 그걸 바로 백엔드 서버에 검증 해달라고 보낸다. (axios 사용)

 

3. 백 엔드 서버에서 받은 쿠키 정보를 기반으로 또 다른 검증 미들웨어가 실행된다. (1의 검증 미들웨어와 다름)

 

4. 여기서는 jwt를 생성한 것과 반대의 과정이 일어난다. 즉, 쿠키를 쪼개서 해독한 후, 유효한지 확인한다.

 

5. 쿠키가 없다면 없다고, 무효하면 무효한 토큰이라고 알려준다. 유효한 토큰이라면 통과

 

6. 각각의 경우에 맞는 응답을 백 엔드에서 프론트 엔드에 보낸다.

 

7. 프론트 엔드는 백 엔드 서버의 response에 따라 각각의 경우에 대응하는 코드를 실행한다.

 

2.1 검증 미들웨어 (front) 작성

front 폴더 안에 utils 폴더를 만들고 그 안에 auth.js를 작성해준다.

 

(필요 외부 라이브러리 : axios)

/*  front/utils/auth.js  */

const axios = require('axios')

exports.Auth = async (req, res, next) => {
   const { token } = req.cookies
   const data = { token }
   
   const option = {
      'Content-type' : 'application/json',
      withCredentials : true
   }
   
   const response = await axios.post('http://localhost:4001/api/auth', data, option)
}

response 에 따른 반응은 우선 백 엔드 서버에서의 미들웨어 작성 후 이어서 작성한다.

2.2 검증 미들웨어 (back) 작성

프론트 서버에서 보낸 요청(쿠키를 포함한)을 받아줄 라우터를 작성해준다.

 

/*  back/server.js  */

app.post('/api/auth', Auth, (req, res) => {
   if(req.user === undefined) {
      res.send('false')
   }
   else {
      res.send('true')
   }
}

우선 Auth 미들웨어를 거치고 그 결과 req.user라는 값이 있다면 (쿠키에 문제가 없다면) true를,

 

req.user 값이 없다면 false를 프론트 서버에 응답으로 전송해줄 것이다.

 

Auth 미들웨어는 또 js를 하나 따로 파서 작성하자.

 

/*  back/utils/auth.js  */

const { createSignature } = require('./jwt.js')

exports.Auth = (req, res, next) => {
   try {
      const { token } = req.body
      
      if (token === undefined) { throw new Error('로그인 해주세요.') }
      
      const [ header, payload, sign ] = token.split('.')
      const signature = createSignature(header, payload)
      
      if(sign !== signature) { throw new Error('invalid token') }
      
      const user = JSON.parse(Buffer.from(payload, 'base64').toString('utf-8'))
      
      req.user = {
         ...user
      }
   }
   catch (e) {
      console.log(e.message)
   }
   next()
}

쿠키가 존재하고, 유효한 정보라면 이 쿠키를 해독하면 사용자의 정보가 나올 것이다.

 

그걸 req.user에 넣어 놓고 다음 미들웨어를 실행한다.

 

req.user의 값이 있다면 true를, 정의되지 않았다면 (쿠키가 없거나 무효하다면) false를 응답으로서

 

프론트 엔드 서버에 전송한다.

 

Auth 미들웨어를 server.js에 import 해주자.

/*  back/server.js  */

const { Auth } = require('./utils/auth.js ')

2.3 다시 프론트 엔드 서버에서 결과값을 받아 각각의 경우에 맞는 코드 실행

/*  front/utils/auth.js  */

const axios = require('axios')

exports.Auth = async (req, res, next) => {
   const { token } = req.cookies
   const data = { token }
   
   const option = {
      'Content-type' : 'application/json',
      withCredentials : true
   }
   
   const response = await axios.post('http://localhost:4001/api/auth', data, option)
   
   // 여기부터 이어서 작성
   if (response.data === true) {
      next()
   }
   else {
      res.render('tokenError.html')
   }
}

백 엔드의 Auth 에서 프론트의 Auth에 응답을 준 것임을 기억하자.

 

이제 이 프론트 엔드의 Auth가 true 값을 받았다면 다음 미들웨어를 실행하고,

 

아닐 경우 tokenError.html을 렌더링 해줄 것이다.

 

/*  front/views/tokenError.html  */

invalid token

 

이 front의 Auth 미들웨어를 모든 게시판의 라우터에 넣고 싶다.

 

다음과 같이 각 라우터에 미들웨어로서 추가해주면 게시판의 어떤 페이지든 접속 전에 Auth 미들웨어를 통해

 

검증이 이루어질 것이다.

 

/*  back/routes/index.js  */

const { Auth } = require('../utils/auth.js')  //  추가

router.user('/board', Auth, boardRouter)  //  수정

 

다음 글에서는 본격적으로 게시판 페이지를 만들어보자.