Route guard là gì?

Question

Route guard là gì?

Accepted Answer

**Route guard** là các hàm kiểm soát **việc điều hướng tới/khỏi một route có được phép hay không**. Chúng chạy trước khi một route được kích hoạt (hoặc trước khi bạn rời khỏi một route), cho phép kiểm tra xác thực, kiểm soát quyền, và nhắc "thay đổi chưa lưu". ## Các loại guard ```text CanActivate → người dùng có thể vào route này không? (kiểm tra auth/quyền) CanActivateChild → tương tự, cho route con CanDeactivate → người dùng có thể RỜI không? ("bạn có thay đổi chưa lưu") CanMatch → route này có nên được khớp hay không? (feature flag, theo vai trò) resolve → lấy trước dữ liệu TRƯỚC khi route kích hoạt ``` ## Một functional CanActivate guard (Angular hiện đại) ```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; // cho phép điều hướng } return router.createUrlTree(["/login"]); // chuyển hướng tới login }; ``` Một guard trả về `true` (cho phép), `false` (chặn), hoặc một `UrlTree` (chuyển hướng). Angular hiện đại dùng **functional guard** (các hàm thuần với `inject()`) thay vì kiểu class-based cũ. ## Áp dụng guard cho các route ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // bảo vệ route này }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // chỉ khớp cho admin }, ]; ``` ## CanDeactivate — ngăn mất dữ liệu ngoài ý muốn ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("Bạn có thay đổi chưa lưu. Vẫn rời đi?"); } return true; }; ``` Guard kinh điển này cảnh báo người dùng trước khi điều hướng khỏi một form có chỉnh sửa chưa lưu. ## Guard có thể bất đồng bộ ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // guard có thể trả về Observable hoặc Promise ``` ## Tại sao điều này quan trọng Guard là cách tiêu chuẩn, tập trung để thực thi kiểm soát truy cập và các quy tắc điều hướng trong Angular — bảo vệ các route đã xác thực, chặn theo vai trò/quyền, ngăn mất dữ liệu khi thoát, và tải trước dữ liệu (resolver). Đặt các kiểm tra này trong guard (thay vì rải rác trong component) giữ logic bảo mật và điều hướng nhất quán và khai báo; `authGuard` trên các route được bảo vệ là thứ hầu như mọi ứng dụng Angular thực tế đều triển khai.