如何替换 Angular 的CanActivate接口

在本文中，我们将探讨 Angular 的“CanActivate”接口的弃用，并讨论如何用推荐的解决方案替换它。我们将介绍官方文档的建议以及解决此已弃用警告的替代解决方案。

1. 问题

升级 Angular 15 版本后，您遇到了 Angular 中“CanActivate”接口已弃用的警告。官方Angular 文档提到“CanActivate”和“CanActivateChild”已弃用，应替换为纯 JavaScript 函数。您可能正在寻求有关如何调整代码以解决此弃用警告的指导。

2. 解决方案

根据 Angular 官方文档，推荐的解决方案是将“CanActivate”和“CanActivateChild”替换为纯 JavaScript 函数。以下是实施该解决方案的方法：

import { inject } from "@angular/core";
import {
  ActivatedRouteSnapshot,
  CanActivateChildFn,
  Router,
  RouterStateSnapshot,
} from "@angular/router";
import { AuthenticationService } from "../services/authentication.service";

export const loginCheckGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  const authService = inject(AuthenticationService);
  const router = inject(Router);

  return authService.checkLogin().pipe(
    map(() => true),
    catchError(() => {
      router.navigate(["route-to-fallback-page"]);
      return of(false);
    })
  );
};

说明:

使用

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: "team/:id",
        component: TeamComponent,
        canActivate: [loginCheckGuard],
      },
    ]),
  ],
});

通过使用 Angular 中的函数，您可以将和 inject()的实例注入 JavaScript 函数中。这允许您访问函数上下文中必要的依赖项。AuthenticationServiceRouter

该 canActivate 函数使用 执行必要的身份验证检查 AuthenticationService，如果用户未通过身份验证，它将使用 重定向到后备页面 Router。

3. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

4. 结论

总之，Angular 的“CanActivate”接口已弃用的警告可以通过用纯 JavaScript 函数替换来解决。通过使用该 inject()函数，您可以访问函数内必要的依赖项。正如官方 Angular 文档所建议的，推荐的方法提供了一个简单的解决方案来解决此弃用警告。

此外，及时了解最新的 Angular 文档和最佳实践也很重要，以确保顺利迁移并避免潜在问题。

5. 参考文档

How to Replace Angular’s “CanActivate” Interface: A Comprehensive Guide - Angular

Angular CanActivate