ตัวป้องกันเส้นทางในแองกูลาร์

บทเรียนนี้อธิบายวิธีรักษาความปลอดภัยให้เส้นทางในแอปพลิเคชันแองกูลาร์โดยใช้ตัวป้องกันเส้นทาง

ตัวป้องกันเส้นทางคืออะไร

ตัวป้องกันเส้นทางควบคุมการเข้าถึงเส้นทางในแองกูลาร์ มีประโยชน์สำหรับปกป้องเส้นทางที่มีข้อมูลสำคัญหรือจำกัดการเข้าถึง

ประเภทของตัวป้องกัน

• CanActivate: กำหนดว่าเส้นทางสามารถเปิดใช้งานได้หรือไม่
• CanActivateChild: ป้องกันเส้นทางย่อย
• CanDeactivate - ตรวจสอบก่อนออกจากเส้นทาง
• การดึงข้อมูลล่วงหน้า - ดึงข้อมูลล่วงหน้าก่อนเปิดใช้งานเส้นทาง

การสร้างตัวป้องกัน

สร้างตัวป้องกันโดยใช้ Angular CLI:

ng generate guard auth

การใช้งาน canActivate()

เมธอด canActivate() ควบคุมการเข้าถึงเส้นทาง:

canActivate(): boolean {
  return true; // or false to block navigation
}

การใช้ตัวป้องกันในเส้นทาง

เพิ่มตัวป้องกันให้กับเส้นทางในโมดูลการกำหนดเส้นทาง:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

ตัวป้องกัน CanDeactivate

CanDeactivate จะป้องกันไม่ให้ออกจากเส้นทางหากไม่เป็นไปตามเงื่อนไขบางอย่าง ซึ่งมีประโยชน์สำหรับแบบฟอร์ม:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

ตัวป้องกันการดึงข้อมูลล่วงหน้า

ตัวป้องกัน Resolve จะดึงข้อมูลก่อนโหลดเส้นทาง:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

สรุป

คุณได้เรียนรู้วิธีรักษาความปลอดภัยและเพิ่มประสิทธิภาพการนำทางในแอปแองกูลาร์ด้วยตัวป้องกันเส้นทางแล้ว เดินหน้าต่อไป