Route guards คืออะไร?

Question

Accepted Answer

**Route guards** คือฟังก์ชันที่ควบคุม**ว่าการนำทางไปยัง/จากเส้นทางได้รับอนุญาตหรือไม่** ฟังก์ชันเหล่านี้ทำงานก่อนที่เส้นทางจะเปิดใช้งาน (หรือก่อนที่คุณจะออกจากเส้นทาง) ซึ่งช่วยให้การตรวจสอบการพิสูจน์ตัวตน การควบคุมสิทธิ์ และข้อความเตือน "มีการเปลี่ยนแปลงที่ยังไม่บันทึก" ## ประเภทของ guard ```text CanActivate → can the user enter this route? (auth/permission check) CanActivateChild → same, for child routes CanDeactivate → can the user LEAVE? ("you have unsaved changes") CanMatch → should this route even be matched? (feature flags, role-based) resolve → pre-fetch data BEFORE the route activates ``` ## Guard CanActivate ที่เป็นฟังก์ชัน (Angular สมัยใหม่) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // allow navigation } return router.createUrlTree(["/login"]); // redirect to login }; ``` Guard ส่งกลับ `true` (อนุญาต), `false` (ปิดกั้น) หรือ `UrlTree` (เปลี่ยนเส้นทาง) Angular สมัยใหม่ใช้ **functional guards** (ฟังก์ชันธรรมดาที่มี `inject()`) แทน guard ที่ใช้คลาสแบบเก่า ## การใช้ guard กับเส้นทาง ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // protect this route }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // only match for admins }, ]; ``` ## CanDeactivate — ป้องกันการสูญเสียข้อมูลโดยไม่ตั้งใจ ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("You have unsaved changes. Leave anyway?"); } return true; }; ``` Guard แบบคลาสสิกนี้เตือนผู้ใช้ก่อนเดินทางออกจากแบบฟอร์มที่มีการแก้ไขที่ยังไม่บันทึก ## Guard สามารถเป็น async ได้ ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guards can return Observable or Promise ``` ## ทำไมจึงมีความสำคัญ Guard เป็นวิธีมาตรฐานแบบรวมศูนย์ในการบังคับใช้การควบคุมการเข้าถึงและกฎการนำทางใน Angular — การป้องกันเส้นทางที่ได้รับการพิสูจน์ตัวตน การจำกัดตามบทบาท/สิทธิ์ การป้องกันการสูญเสียข้อมูลเมื่อออก และการโหลดข้อมูลล่วงหน้า (resolvers) การวางการตรวจสอบเหล่านี้ในการป้องกัน (แทนที่จะกระจายไปทั่วส่วนประกอบ) จะทำให้ตรรมชาติด้านความปลอดภัยและตรรกะการนำทางสอดคล้องและประกาศ `authGuard` บนเส้นทางที่ป้องกันคือสิ่งที่แอปพลิเคชัน Angular จริงเกือบทุกตัวใช้งาน