Vue + Firebase Authentication(Email)

ใช้ Vue และ Firebase สร้างระบบล็อกอินด้วยอีเมลล์ การนำ firebase มาช่วยทำให้งานง่ายขึ้นมาก ไม่ต้องจัดการเซิร์ฟเวอร์เองง่าย รวดเร็วและปลอดภัย มือใหม่ก็สามารถทำได้ โค้ดก็เขียนแค่ฝั่งไคลเอนด์
ตัวอย่าง จะใช้ Authen ร่วมกับ Router เพื่อควบคุมการเข้าถึงหน้าต่างๆด้วย มีการแสดง error ของ firebase และใช้ async await แทน Promise ทำให้อ่านเข้าใจง่ายกว่า
ผมเคยทำโปรเจ็ดเวปแอปที่ใช้ Firebase กับ Bootstrap รู้สึกว่ามันแก้ไขยากพอควร พอเปลี่ยนมาใช้ Vue ชีวิตก็ง่ายขึ้น และผมเอาไว้สอนนักเรียนเขียนโปรแกรม เลยทำวีดีโอเอาไว้ทบทวนด้วย
[Note]
ในตัวอย่างจะใช้ Firebase 8 ซึ่งมีการเปลี่ยนแปลงพอสมควร ตัวอย่างส่วนใหญ่ในเวปจะเป็นเวอร์ชั่นต่ำกว่า และตอนที่ทำวีดีโอนี้มีบางไลบารียังไม่ได้อัปเดตให้ใช้งานกับรุ่นใหม่ได้เช่น vue-fire
ก่อนเวอร์ชั่น 8 จะประกาศประมาณนี้
import * as firebase from 'firebase/app'
เวอร์ชั่น 8 ขึ้นไป จะทำแบบนี้แล้วเลือกโมดูลที่จะโหลด
import firebase from 'firebase/app';
import 'firebase/auth'
ถ้าใช้การประกาศแบบเดิมตัวอย่างนี้ก็จะใช้กับรุ่นเก่าได้
อ่านเพิ่มเติม
https://firebase.google.com/support/release-notes/js#8.0.0

[Deploy]
สำหรับการ deploy ขึ้น firebase ให้ ใช้คำสั่ง
npm run build
จะสร้างโฟลเดอร์ dist และมีโค้ดที่บีบอัดพร้อมส่งขึ้นเวปแล้ว ให้ใช้คำสั่ง
firebase init
ที่โฟ่ลเดอร์โปรเจ็กเลย แล้วแก้ให้ firebase.json จาก public โฟลเดอร์ dist แล้วเรียก
firebase deploy
โค้ดของเราก็จะขึ้นไปบนเวปโดยใช้ firebase เป็น Webserver ในตัว