ในบล็อกที่แล้ว เราได้พูดคุยถึง
Angular Router 10: การสร้างโมดูลแยกต่างหากสำหรับการกำหนดเส้นทาง
ก่อนที่จะไปที่ Can Activate Guard จำเป็นต้องทำความเข้าใจว่ามีอะไรป้องกันในเชิงมุม
พูดง่ายๆ ก็คือ การ์ดคือผู้พิทักษ์ของเราเตอร์
ตามค่าเริ่มต้น เราสามารถนำทางเส้นทางหนึ่งไปยังอีกเส้นทางหนึ่งได้อย่างอิสระในเชิงมุม บางครั้งเราไม่ต้องการการนำทางไปยังเส้นทางเพราะเราอาจต้องการข้อมูลบางอย่างเพื่อนำทาง เพื่อที่จะปกป้องยาม เข้ามารูปภาพที่นี่ เช่นเดียวกับภาพที่แสดงด้านล่าง
การ์ดจะทำงานเฉพาะค่าบูลีนเท่านั้น นอกเหนือจากนั้นสามารถทำตามคำสัญญาหรือสิ่งที่สังเกตได้ แม้จะเป็นเช่นนั้นก็ยังใช้เป็นบูลีนเป็นประเภทอีกด้วย เพียง True Means Navigate และ False หมายถึงไม่นำทาง
ส่วนใหญ่มียาม 5 ประเภทในเชิงมุม
- สามารถเปิดใช้งานได้: เพื่อให้ผู้ใช้สามารถใช้เส้นทางได้
- สามารถเปิดใช้งานเด็ก : เพื่อดูว่าผู้ใช้สามารถนำทางไปยังเส้นทางเด็กได้หรือไม่
- สามารถปิดการใช้งาน : เพื่อออกจากเส้นทาง
- แก้ไข : การดึงข้อมูลก่อนการเปิดใช้งานเส้นทาง
- CanLoad : กำหนดเส้นทางไปยังโมดูลที่โหลดแบบ Lazy Load
ในบล็อกปัจจุบันของเรา เราจะพูดถึง Can Activate guard
Can Activate เป็นอินเทอร์เฟซที่ใช้เพื่อช่วยตัดสินใจว่าสามารถเปิดใช้งานเส้นทางได้หรือไม่
ฉันได้สร้าง 2 คอมโพเนนต์ คอมโพเนนต์หนึ่งคือคอมโพเนนต์การเข้าสู่ระบบ และคอมโพเนนต์ที่สองคือคอมโพเนนต์ออกจากระบบ
1 Service และ 1 guard ในไฟล์บริการ เราจะเก็บตัวแปรไว้ว่าเป็นจริงหรือเท็จ
และในไฟล์ guard เราจะตรวจสอบว่าตัวแปรเป็นจริงหรือไม่ หากมีเราจะเปิดใช้งานเส้นทางของเรา
ในที่สุดเราจะแนบตัวป้องกันสำหรับเราเตอร์
ค้นหารหัสการทำงานได้ที่นี่
https://stackblitz.com/edit/angular-ivy-zydh9t
ใน logout.component.ts เรากำลังเรียกใช้บริการซึ่งตั้งค่าเป็นจริงเป็นค่า
auth.service.ts
สร้างไฟล์ ts โดยมีหลักการตั้งชื่อเป็น _name_.guard.ts เพื่อสร้างการ์ด
ใน Guard ของเรา เราระบุตรรกะของเรา ที่นี่ฉันถือว่าค่าการเข้าสู่ระบบของบริการ Auth เป็นจริงและเปิดใช้งานเส้นทาง หากไม่ได้นำทางไปยังส่วนประกอบการออกจากระบบ
ในโมดูลการกำหนดเส้นทางของเรา เราจะแนบตัวป้องกันนี้ไว้เพื่อให้สามารถปกป้องตัวป้องกันได้ เช่นเดียวกับการหลีกเลี่ยงการนำทาง
ในเส้นทางการเข้าสู่ระบบเราได้แนบการป้องกันของเราโดยการเพิ่มรหัส canActivate
ในบล็อกถัดไป
เราเตอร์เชิงมุม 12: สามารถปิดใช้งาน Guard ได้
— — — — — — — — — สิ้นสุดการบรรยาย — — — — — — —
ตรวจสอบบทเรียนทั้งหมดของ Angular Intermediate Lessons
https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b
