ทำ LOGIN ง่ายๆ ภายใน 30 นาที

เมื่อ EP ที่แล้วม่อนได้สอนการติดตั้ง Nuxt JS ไป

รอบนี้ม่อนจะมาแนะนำระบบที่เว็บแอพพลิเคชั่นส่วนใหญ่ก็มี นั้นก็คือระบบ Login  ฟังดูแล้วอาจจะเป็นระบบง่ายๆ ใช่ครับมันง่ายมาก แต่ผมจะมา แนะนำให้ทำง่ายขึ้นกว่าเดิมเข้าไปอีก มาเริ่มกันเลยครับ เปิดโปคขึ้นมาเลยครับ

เมื่อเราติดตั้ง Dependencies ของเราเรียบร้อยก็ให้ทำการเรียกใช้ 

โดยไปที่ไฟล์ nuxt.config.js และ ใส่โค๊ดตามตัวอย่างด้านซ้าย ไว้ในส่วนของ Modules

สร้าง API สำหรับ การ login

ให้เพื่อนๆติดตั้ง Dependencies เพิ่มเติม

• yarn add cors express body-parser

จากนั้น สร้าง Folder api และ ไฟล์ index.js ไว้ใน Folder

และใส่ Code ตามตัวอย่างด้านซ้าย

กลับมาที่ ไฟล์ nuxt.config.js

เพื่อทำ Config ที่เราจะใช้ในการ login

โดยที่ในส่วน ของ axios จะเป็นตัวเรียก api

และ auth จะเป็นตัวจัดการระบบ login

กลับมายัง Form login ของเรา

ให้สร้าง method ที่ชื่อว่า OnSubmit เพื่อสั่งให้ส่งข่อมูลไปยัง api ของเราเพื่อทำการ login

โดยคำสั่งที่ใช้คือ

this.$auth.loginWith(“local”,{data:this.form})

เมื่อใช้คือจะเป็นเรียก endpoint login ที่เรา config ไว้ใน nuxt.config.js

และเมื่อ login เรียบร้อย ให้ redirect ไปยังหน้า Profile

ทำหน้า Profile สำหรับรอการ Login

จาก Code ตัวอย่างด้านซ้าย เพื่อนๆจะเห็นว่ามีส่วนที่เป็น middleware ซึ่งในส่วนนี้จะทำการตรวจสอบการที่จะเข้ามาหน้านี้ ว่ามีการ authen หรือ login เข้ามาหรือยัง หากยังระบบจะ redirect ไปยังหน้า login โดยอัตโนมัติ

อธิบายคำสั่งเพิ่มเติม

this.$auth.user คือ เรียก endpoint user ที่เรา config ไว้ให้ทำงาน

this.$auth.logout() คือ สั่งให้ทำการออกจากระบบ และให้กลับไปยังหน้า login