Angular Academy · บทเรียน

ตัวป้องกันเส้นทางแบบฟังก์ชัน

ปกป้องเส้นทางด้วยตัวป้องกันแบบฟังก์ชัน

ตัวป้องกันเส้นทางแบบฟังก์ชัน เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

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

ตัวป้องกันจะตัดสินใจว่าการนำทางจะดำเนินต่อได้หรือไม่ เช่น ป้องกันเส้นทางด้วยการยืนยันตัวตน ขอการยืนยันก่อนออกจากแบบฟอร์ม หรือจำกัดการเข้าถึงตามบทบาท Angular สมัยใหม่ใช้ ตัวป้องกันแบบฟังก์ชัน ซึ่งเป็นฟังก์ชันธรรมดา ไม่ใช่คลาส

CanActivateFn

CanActivateFn จะส่งคืน true เพื่ออนุญาต false เพื่อบล็อก UrlTree เพื่อเปลี่ยนเส้นทาง หรือออบเซอร์เวเบิล/พรอมิสของค่าเหล่านั้น

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

การเชื่อมการ์ดเข้ากับเส้นทาง

แนบการ์ดด้วย canActivate (เป็นอาร์เรย์ คุณจึงซ้อนการ์ดหลายตัวได้)

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

การเปลี่ยนเส้นทางด้วย UrlTree

การคืนค่า UrlTree (จาก router.createUrlTree หรือ parseUrl) จะทั้งบล็อกและเปลี่ยนเส้นทางได้ในขั้นตอนเดียว

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

การ์ดแบบอะซิงโครนัส

การ์ดสามารถคืนค่าออบเซอร์เวเบิลได้ โดยเราเตอร์จะรอค่าตัวแรกแล้วจึงดำเนินการจนเสร็จ

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

การเข้าถึงข้อมูลเส้นทางในการ์ด

CanActivateFn จะได้รับ ActivatedRouteSnapshot และ RouterStateSnapshot คุณจึงอ่านพารามิเตอร์ ข้อมูล และ URL ที่พยายามเข้าถึงได้

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

การ์ด canMatch

CanMatchFn จะตัดสินใจว่านิยามเส้นทางตรงกับเส้นทางหรือไม่ตั้งแต่แรก เหมาะสำหรับการสลับเส้นทางตามแฟล็กฟีเจอร์ หรือโหลดแบบขี้เกียจเฉพาะเมื่อได้รับอนุญาต

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

การ์ด canDeactivate

CanDeactivateFn จะทำงานเมื่อออกจากเส้นทาง เหมาะอย่างยิ่งสำหรับการยืนยันการเปลี่ยนแปลงที่ยังไม่ได้บันทึก โดยจะได้รับอินสแตนซ์ของคอมโพเนนต์

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

การซ้อนการ์ดหลายตัว

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

canActivate: [authGuard, roleGuard]
// both must pass

เหตุผลที่ควรใช้การ์ดแบบฟังก์ชันแทนการ์ดแบบคลาส

การ์ดแบบฟังก์ชันเรียบง่ายกว่า ไม่ต้องเขียนโค้ดประกอบของ @Injectable ใช้ inject() ได้ง่าย นำมาประกอบกันได้ และตัดออกจากบันเดิลได้เมื่อไม่ใช้งาน อินเทอร์เฟซ CanActivate แบบใช้คลาสถูกเลิกใช้งานแล้ว

การ์ดกับเส้นทางย่อย

canActivateChild ช่วยปกป้องเส้นทางย่อยทั้งหมดของเส้นทางแม่ได้ในที่เดียว จึงไม่ต้องใส่การ์ดซ้ำในเส้นทางย่อยแต่ละรายการ

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับการ์ดแบบฟังก์ชันของคุณ

สรุป: การ์ดเส้นทางแบบฟังก์ชัน

การ์ดแบบฟังก์ชันควบคุมการเปลี่ยนเส้นทางด้วยฟังก์ชันทั่วไป

CanActivateFn: อนุญาต บล็อก หรือเปลี่ยนเส้นทาง (UrlTree)
CanMatchFn: ตัดสินใจว่าเส้นทางตรงกันหรือไม่ตั้งแต่แรก
CanDeactivateFn: ยืนยันการออกจากเส้นทาง
ใช้ inject() สำหรับบริการ และซ้อนการ์ดไว้ในอาร์เรย์

ถัดไป: เหตุการณ์ของเราเตอร์และการเปลี่ยนเส้นทาง

คำถามที่พบบ่อย

บทเรียน “ตัวป้องกันเส้นทางแบบฟังก์ชัน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวป้องกันเส้นทางแบบฟังก์ชัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวป้องกันเส้นทางแบบฟังก์ชัน”

ปกป้องเส้นทางด้วยตัวป้องกันแบบฟังก์ชัน คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวป้องกันเส้นทางแบบฟังก์ชัน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy