Nuxt.js Fundamental ตอนที่ 10 - การทำ Internal API และ Middleware

เนื้อหาของบทเรียน Nuxt.js

• ตอนที่ 1 - Getting Started with Nuxt.js
• ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
• ตอนที่ 3 - การกำหนด Routing
• ตอนที่ 4 - Nuxt.js Concept
• ตอนที่ 5 - Nuxt Content และ Async Data
• ตอนที่ 6 - การดึงข้อมูลจาก APIs
• ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
• ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js
• ตอนที่ 9 - การ Deploy Nuxt.js
• ตอนที่ 10 - การทำ Internal API และ Middleware
• ตอนที่ 11 - ทำ SEO และ Meta tags
• ตอนที่ 12 - Workshop

ต่อมาขอเสริมเรื่องการทำ Internal API กันซักนิด ต่อยอดจาก ตอนที่ 8 - ทำระบบ Authentication

จากตอนก่อนหน้านี้ ผมใช้ API ที่อยู่อีก Server นึง ทีนี้ ถ้าตัว Nuxt.js อยากให้ API อยู่ที่เดียวกันกับตัว Nuxt Page ปกติเลย ทำได้มั้ย?

คำตอบคือทำได้ครับ

serverMiddleware

ตัว serverMiddleware ทำให้เราสามารถกำหนด API ได้เอง และส่วน API ก็สามารถเขียนได้แบบ style ของ Express.js เลยครับ

ตัวอย่างเช่นไฟล์ nuxt.config.js

1
export default {
2
  serverMiddleware: [{ path: '/api', handler: '~/api/index.js' }]
3
}

• เราแค่ระบุเป็น Object path และ handler function ใน serverMiddleware
• ส่วนไฟล์ handler ก็สามารถไว้ที่โฟลเดอร์ api (สร้างใหม่ หรือใช้ชื่ออื่นๆ ก็ได้)

ทีนี้ เราก็มาสร้างโฟลเดอร์ api ไว้ที่ level เดียวกับ pages หรือ components โดยข้างในมีไฟล์ index.js ครับ

1
const express = require('express')
2
const app = express()
3

4
app.get('/hello', (req, res) => {
5
  res.json({ message: 'Hello from serverMiddleware' })
6
})
7

8
module.exports = app

ติดตั้ง express ด้วย npm install express ก่อนนะ ถ้าใครรันไม่ได้

ทีนี้ พอเรากำหนด แบบนี้ เราก็สามารถเข้าถึง http://localhost:3000/api/hello ก็จะแสดงผล {message: 'Hello from serverMiddleware'} ครับ

เพราะเรากำหนดใน serverMiddleware ว่า path คือ /api และในไฟล์ api/idnex.js เรากำหนด app.get('/hello') ฉะนั้น path มันก็จะต่อกันเป็น /api/hello เหมือนกับเราใช้ Express แบบนี้

1
const router = express.Router()
2
router.get('/hello', (req, res) => {})
3

4
app.use('/api', router)

สร้างไฟล์ api/auth.js

ทีนี้มาดูการใช้งานจริง ผมก็อปไฟล์ server.js จากตอนที่ 8 มาดังนี้

1
const express = require('express')
2
const cors = require('cors')
3

4
const app = express()
5
const router = express.Router()
6

7
app.use(cors())
8
app.use(express.json())
9

10
const user = {
11
  id: 1,
12
  username: 'john',
13
  email: 'john@doe.com',
14
  name: 'John Doe'
15
}
16

17
router.get('/me', (req, res) => {
18
  return res.json({
19
    data: {
20
      user
21
    }
22
  })
23
})
24

25
router.post('/login', (req, res) => {
26
  const { email, password } = req.body
27

28
  // query db.
29

30
  if (email === 'admin@admin.com' && password === '123456') {
31
    return res.json({
32
      data: {
33
        user,
34
        token: 'THIS_IS_TOKEN'
35
      }
36
    })
37
  } else {
38
    return res.status(401).json({
39
      message: 'Invalid Password'
40
    })
41
  }
42
})
43

44
app.use('/api', router)
45

46
app.listen(12345, () => {
47
  console.log('Mock API start on port 12345')
48
})

จากนั้น ผมทำการปรับแก้ บางส่วน คือ

1
 app.use('/api', router);
2

3
 app.listen(12345, () => {
4
   console.log('Mock API start on port 12345');
5
 });
6

7
module.exports = {
8
  path: '/api',
9
  handler: app
10
}

จากโค๊ดจะเห็นว่า ผมใช้เป็น

1
module.exports = {
2
  path: '/api',
3
  handler: app
4
}

• เพราะ serverMiddleware กำหนดให้ Object เป็น path กับ functoin handler
• และเอา app.use('/api', router) ออก เนื่องจากเรากำหนดใน path: '/api' แทน ก็เลยเหลือแค่ app.use(router)
• app.listen ก็ไม่ต้องใช้แล้วครับ เพราะเราไม่ได้ start server แยก

สุดท้ายไฟล์ api/auth.js ก็จะได้แบบนี้

1
const express = require('express')
2
const cors = require('cors')
3

4
const app = express()
5
const router = express.Router()
6

7
app.use(cors())
8
app.use(express.json())
9

10
const user = {
11
  id: 1,
12
  username: 'john',
13
  email: 'john@doe.com',
14
  name: 'John Doe'
15
}
16

17
router.get('/me', (req, res) => {
18
  return res.json({
19
    data: {
20
      user
21
    }
22
  })
23
})
24

25
router.post('/login', (req, res) => {
26
  const { email, password } = req.body
27

28
  // query db.
29

30
  if (email === 'admin@admin.com' && password === '123456') {
31
    return res.json({
32
      data: {
33
        user,
34
        token: 'THIS_IS_TOKEN'
35
      }
36
    })
37
  } else {
38
    return res.status(401).json({
39
      message: 'Invalid Password'
40
    })
41
  }
42
})
43

44
app.use(router)
45

46
module.exports = {
47
  path: '/api',
48
  handler: app
49
}

ต่อมาที่ไฟล์ nuxt.config.js ก็ปรับแก้ serverMiddleware อีกนิด เป็นแบบนี้

1
export default {
2
  serverMiddleware: ['~/api/auth.js']
3
}

เราสามารถกำหนด serverMiddleware เป็น string ก็ได้ หรือ Object ก็ได้ (ถ้าเป็น string ก็ต้องเป็นไฟล์ที่เรามี Object path และ handler นั่นเอง ไม่งงเนอะ)

ทีนี้ เราก็สามารถใช้ API ได้แบบเดียวกันกับตอนที่ 8 ได้เลย โดยที่ไม่ต้อง Start server แยก ที่ port 12345 แล้ว ก็ใช้ port เดียวกันกับเว็บปกติเลยคือ 3000

ทดลองเข้า http://localhost:3000/api/me แล้วดูผลลัพธ์

Middleware

ทีนี้มาดูเรื่องของ Middlware กันบ้างครับ จริงๆ ในตอนที่ 8 เราจะเห็นว่ามีการกำหนด Middleware ในหน้า Page เช่น

1
<script>
2
  export default {
3
    middleware: 'auth'
4
  }
5
</script>

จริงๆแล้ว Middlware มันก็คือ function นี่แหละครับ ที่จะรันก่อน page มัน render เราสามารถสร้าง middlware แบบ global แชร์กันได้ โดยสร้างไว้ในโฟลเดอร์ middlware นั่นเอง

ตัวอย่าง middlware function (args ตัวแรกที่ถูกส่งไปคือ context) เราสามารถเข้าถึงค่า context ได้ เช่น handle ว่าเป็น server หรือ client หรือ get params เป็นต้น

เช่น ผมสร้าง middlware/logger.js ขึ้นมา

1
export default function (context) {
2
  console.log('Logging....')
3
}

ทีนี้ถ้าอยากใช้ middlware นี้ ก็แค่กำหนดใน page แบบนี้

1
<script>
2
  export default {
3
    middleware: ['logger', 'auth']
4
  }
5
</script>

ชื่อ Middleware ก็ตามชื่อไฟล์เลย

นอกจากนี้เราก็ยังสามารถสร้าง Middlware แบบ anonymous ใช้แค่ที่เดียวแบบนี้ได้

1
<template>
2
  <h1>Secret page</h1>
3
</template>
4

5
<script>
6
  export default {
7
    middleware({ store, redirect }) {
8
      // If the user is not authenticated
9
      if (!store.state.authenticated) {
10
        return redirect('/login')
11
      }
12
    }
13
  }
14
</script>

รายละเอียดเพิ่มเติมเกี่ยวกับ Middleware อ่านได้ที่นี่

Hints & Questions?

• Internal API ถ้าเราทำการ build แบบ static และเป็น mode spa มันจะรันได้มั้ย?
• ลองใช้ Internal API ร่วมกับ connect ดูครับ
• serverMiddleware กับ middleware ใน Page เหมือนกันมั้ย?

อ่านบทถัดไป 👉 ตอนที่ 11 - ทำ SEO และ Meta tags