NuxtJS ทำ middleware authentication ด้วย @nuxtjs/auth-next

ก่อนอื่นเรามาคุยเรื่องการทำ middleware ในตัว nuxt กันก่อนครับ โดยปกติแล้ว nuxt จะมี folder middleware มา เราก็ทำในนั้นเลย เขียน logic ต่างๆ แล้วก็เรียกใช้ใน pages ที่ต้องการ ส่วนการทำ auth การส่ง token ไปยัง API ต้องเขียน logic เพิ่มเพื่อส่ง token ไปพร้อมกับ request ทำให้ API ของเรามีความปลอดภัย

วันนี้เรามี library ตัวนึงมานำเสนอ เพื่อลดขั้นตอนในการ เขียน logic ต่างๆ สำหรับการ authentication นั้นก็คือ @nuxtjs/auth-next

เรามาเริ่มต้นการใช้งานกันเลย

เริ่มต้นด้วยการ install กันก่อนนะครับ

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

ในส่วนของ @nuxtjs/axios เป็น library ที่ nuxt ทำมาให้เพื่อง่ายต่อการใช้งานตาม framework

จากนั้นเรียกใช้งานที่ nuxt.config.js

• กำหนด strategy เป็นแบบ local และกำหนด endpoints ต่างๆ ซึ่ง ${BASE_API} เรากำหนดผ่าน environment variable หรือกำหนดด้วย axios ก็ได้
• กำหนด redirect เมื่อการ authentication ไม่ถูกต้อง เช่น $auth.isLoggedIn เป็น false ก็ redirect ไปหน้า login ที่เรากำหนด
• ตัว credentials: true ใน axios คือกำหนดให้ทุกๆ request จะส่ง Authorization header ไปด้วย

Activate Vuex store ด้วยการสร้างไฟล์ store/index.js ข้างในมีแค่นี้

const state = () => ({})
export {state}

การเรียกใช้งานการ login แสนง่ายตัวอย่างดังนี้

การเรียกใช้ใน middleware สามารถเรียกได้เหมือนเดิมภายได้ชื่อ middleware “auth”

เพียงเท่านี้เราก็สามารถทำ authentication เสร็จเรียบร้อยเมื่อ มีการ call request ไปยัง API ก็จะมี headers token ติดไปด้วยเสมอ