เมื่อยังไม่ล็อกอิน — Protected Routes

ตอนนี้แอปของคุณล็อกอินได้แล้ว และแยกข้อมูลของแต่ละคนได้แล้ว

แต่ยังมีอีกปัญหาหนึ่งที่คนมักเพิ่งเจอหลังจากนั้น คือถ้ามีคนเปิดแอปทั้งที่ยังไม่ได้ล็อกอิน เขาควรเห็นอะไร

แอปที่ดีไม่ปล่อยให้คนหลงทางตั้งแต่หน้าประตู

ถ้าคนยังไม่ได้ล็อกอิน แต่เปิดเข้าหน้าหลักของแอปแล้วเจอหน้าว่าง เจอข้อมูลไม่ครบ หรือเจอของที่ดูเหมือนพัง ความรู้สึกแรกที่ได้คือแอปนี้ไม่น่าเชื่อถือ

ปัญหานี้ไม่ได้เกิดเพราะระบบล็อกอินเสีย แต่มันเกิดเพราะแอปยังไม่รู้ว่าจะพาคนที่ยังไม่ได้แสดงตัวไปตรงไหนดี

สิ่งที่บทนี้จะทำคือ ทำให้แอปมีประตูที่ชัดเจน

ถ้ายังไม่ได้ล็อกอิน ก็ให้เห็นหน้า login อย่างเรียบร้อย

ถ้าล็อกอินแล้ว ค่อยพาเข้าไปในส่วนที่เป็นของเขา

คิดแบบ รปภ. ที่ยืนอยู่ทุกประตู ไม่ใช่แค่หน้าตึก

ถ้าใช้ภาพเดิมต่อ ตอนนี้รปภ.ไม่ได้ยืนแค่หน้าตึกอย่างเดียวแล้ว

เขายืนอยู่ที่ประตูของพื้นที่สำคัญด้วย ถ้ายังไม่ได้แสดงตัว ก็ยังเข้าไปในห้องข้อมูลไม่ได้

นี่แหละคือความหมายของ Protected Route (หน้าที่ต้องล็อกอินก่อนเข้า)

มันไม่ใช่ฟีเจอร์ลึกลับอะไรใหม่ แค่เป็นกติกาง่ายๆ ว่า หน้านี้ต้องผ่านการเช็กตัวก่อนถึงจะเข้าได้

เป้าหมายของบทนี้ ไม่ใช่กันคนออก แต่คือพาเขาไปถูกที่

เวลาได้ยินคำว่า “กันหน้า” หลายคนจะเผลอคิดว่าเป็นการบล็อกหรือทำให้แอปใช้งานยากขึ้น

แต่จริงๆ เป้าหมายของ protected routes คือทำให้ flow ของแอปชัดขึ้นมากกว่า

คนที่ยังไม่ได้ล็อกอินควรเห็นหน้า login

คนที่ล็อกอินอยู่แล้วควรเข้าไปหน้าข้อมูลของตัวเองได้เลย

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

Prompt ที่จะส่งในบทนี้

เราจะบอก AI ให้แอปเช็กสถานะล็อกอินก่อนแสดงเนื้อหาหลัก

ใช้ prompt นี้ได้เลย:

ทำให้แอปตรวจสอบการล็อกอินก่อนแสดงเนื้อหาหลัก

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

ไม่เปลี่ยน design หรือฟังก์ชันที่มีอยู่แล้ว

สิ่งที่ prompt นี้ทำมีอยู่ 3 เรื่อง:

1. กันหน้าหลักไว้สำหรับคนที่ล็อกอินแล้ว
2. พาคนที่ยังไม่ได้ล็อกอินกลับไปหน้าทางเข้า
3. จัดการช่วงสั้นๆ ระหว่างที่ระบบกำลังเช็กสถานะ ให้ไม่ดูเหมือนแอปพัง

ลงมือทำ — เพิ่มประตูที่ชัดเจนให้แอป

1. เปิดโปรเจกต์ของคุณใน Lovable
2. คัดลอก prompt ด้านบนไปวางในแชท
3. ส่งให้ AI ทำงาน
4. รอจนแอปอัปเดตเสร็จ

หลังจากเสร็จ จุดที่สำคัญไม่ใช่แค่ดูว่า login page ยังอยู่

แต่คือดูว่าแอปทั้ง flow ของ “ยังไม่ล็อกอิน” กับ “ล็อกอินแล้ว” ดูเป็นระเบียบและไม่ทำให้คนงงหรือยัง

ทดสอบแบบสองหน้าต่างอีกครั้ง

ขั้นตอนที่ 1 — ดูจากมุมของคนที่ยังไม่ล็อกอิน

1. เปิดหน้าต่าง incognito หรือ private window
2. เปิด URL ของแอปโดยตรง
3. ดูว่าตอนแรกคุณเห็นหน้าอะไร

สิ่งที่ควรเห็นคือหน้า login หรือ signup ที่ชัดเจน ไม่ใช่หน้าหลักของแอป และไม่ใช่หน้าที่ดูว่างเปล่าหรือเหมือนโหลดไม่เสร็จ

ขั้นตอนที่ 2 — ลองล็อกอิน

1. เข้าสู่ระบบด้วยบัญชีหนึ่งบัญชี
2. ดูว่าระบบพาเข้าไปหน้าหลักของแอปหรือไม่
3. เช็กว่าข้อมูลของบัญชีนั้นยังอยู่ครบเหมือนเดิม

ขั้นตอนที่ 3 — ลองออกจากระบบ

1. กดออกจากระบบ
2. ดูว่าระบบพาคุณกลับมาหน้า login ทันทีหรือไม่
3. ลองเปิด URL เดิมของหน้าข้อมูลอีกครั้ง
4. ดูว่าระบบยังพากลับมาหน้า login อยู่หรือไม่

ถ้าทั้งหมดนี้ทำงานถูก แปลว่าตอนนี้แอปของคุณไม่ได้แค่มีล็อกอิน แต่มันรู้ด้วยว่าใครควรเห็นหน้าไหน

อย่าลืมช่วงสั้นๆ ที่แอปกำลังเช็กสถานะ

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

ถ้าช่วงนี้ไม่มีอะไรจัดการเลย หน้าจออาจวูบ เหมือนพัง หรือเด้งแปลกๆ จนคนใช้รู้สึกไม่มั่นใจ

ดังนั้นถ้าคุณเห็นว่าตอนเปิดแอปมีหน้ารอสั้นๆ ที่ดูเรียบร้อย นั่นคือเรื่องดี ไม่ใช่เรื่องเสีย

มันแปลว่าระบบกำลังเช็กให้ชัวร์ก่อนว่าจะพาคุณไปหน้าไหน

สำหรับแอปของคุณเอง

ให้ลองถามตัวเองว่า แอปของคุณมีหน้าไหนบ้างที่คนไม่ควรเห็นถ้ายังไม่ได้ล็อกอิน

ส่วนใหญ่คำตอบคือเกือบทุกหน้าที่เกี่ยวกับข้อมูลส่วนตัว หรืออย่างน้อยควรมีจุดเริ่มต้นที่ชัดมากว่า ถ้ายังไม่ล็อกอิน ตอนนี้ควรอยู่ตรงไหน ไม่ใช่ปล่อยให้เดินหลงเข้าไปในส่วนที่ยังไม่พร้อมให้ใช้

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

• คุณเข้าใจแล้วว่าหน้าสำคัญบางหน้าควรเปิดได้เฉพาะตอนที่ล็อกอินแล้ว
• คุณทำให้คนที่ยังไม่ได้ล็อกอินเห็นหน้า login ที่เรียบร้อยแทนหน้าที่สับสนหรือดูพัง
• คุณทดสอบได้แล้วว่า login, logout และการเข้าถึงหน้าแอปทำงานเป็นระบบเดียวกัน
• แอปของคุณเริ่มมี flow ที่เหมือนแอปจริงมากขึ้น ไม่ใช่แค่มีฟีเจอร์แยกๆ ต่อกัน

บทต่อไป เราจะเพิ่มอีกอย่างที่ช่วยลดแรงเสียดทานได้มากมาก นั่นคือ login ด้วย Google เพื่อให้คนไม่ต้องจำรหัสผ่านใหม่อีกชุด