Angular Resources không phù hợp để sử dụng cho Guards

Angular Resources không phù hợp để dùng trong Guards

Angular 22 đã giới thiệu Resource API ổn định. Công cụ này giúp bạn truy vấn các API và theo dõi các trạng thái loading hoặc error. Nó hoạt động tốt cho nhiều tác vụ.

Tuy nhiên, đừng sử dụng nó trong Guards hoặc Resolvers.

Guards và Resolvers chặn quá trình điều hướng. Một Guard kiểm tra xem người dùng có thể truy cập một route hay không. Một Resolver lấy dữ liệu trước khi một component được tải. Cả hai đều yêu cầu một giá trị boolean, một Promise hoặc một Observable để hoàn tất logic của chúng.

Resources thuộc về Signals API. Signals có tính reactive. Chúng không trả về giá trị một cách đồng bộ. Khi bạn tạo một Resource, giá trị ban đầu sẽ là undefined. Sau đó, nó sẽ chuyển sang trạng thái loading.

Hãy xem lỗi dưới đây:

export const authGuard: CanActivateFn = () => {
  const authResource = httpResource<boolean>(() => ({
    url: '/api/auth/status',
  }));

  return authResource.value() ?? false;
};

Phương thức .value() trả về giá trị signal hiện tại ngay lập tức. Vì việc gọi API cần có thời gian, giá trị sẽ là undefined ở thời điểm bắt đầu. Guard nhận thấy undefined, coi đó là false và hủy bỏ việc điều hướng. Ứng dụng sẽ không bao giờ đợi API.

Để khắc phục điều này, bạn phải chuyển đổi Resource thành một Observable. Việc này làm tăng thêm sự phức tạp không cần thiết.

Guards cần đại diện cho một sự kiện bất đồng bộ duy nhất. Vì vậy, hãy sử dụng HttpClient với Observables hoặc fetch API gốc với Promises.

Cách làm đúng:

export const authGuard: CanActivateFn = () => {
  const http = inject(HttpClient);

  return http.get<boolean>('/api/auth/status');
};

Observable thông báo cho Router đợi cho đến khi yêu cầu hoàn tất.

Hãy sử dụng Resource API cho các component và service. Nó rất tuyệt vời để binding dữ liệu bất đồng bộ vào template của bạn. Hãy dành Promises và Observables cho logic của Router.

Nguồn: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j