如何替换 Angular 的CanActivate接口

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

1. 问题

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

2. 解决方案

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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);
})
);
};

说明:

使用

1
2
3
4
5
6
7
8
9
10
11
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