Angular 的守护者

介绍

在本文中，我们将探索如何在 Angular 17 中使用守卫。守卫允许您保护路由并在允许访问特定路由之前检查某些条件。

什么是功能守卫？

Angular 中的功能防护是一种用于拦截并可能阻止导航到路线的功能。在 Angular 17 中，您可以使用 CanActivateFn 创建功能防护。

代码示例

这是一个功能性 authGuard 的示例：

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  } else {
    router.navigate(['/login']);
    return false;
  }
};

使用守卫

要使用此防护，您必须使用provideRouter和withGuards在路由模块中配置它：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withGuards } from '@angular/router';
import { AppComponent } from './app/app.component';
import { authGuard } from './app/guards/auth.guard';

const routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withGuards())
  ]
}).catch(err => console.error(err));

代码说明

• CanActivateFn：代表保护函数的类型。
• inject：注入服务等依赖项的函数。
• 路由器：导航到其他路线的路由服务。
• authGuard：检查用户是否经过身份验证的防护功能。

结论

Angular 17 中的功能防护提供了一种灵活而强大的方法来保护路由和管理权限。它们对于身份验证和访问控制等任务特别有用。

更多详情请参见 Angular 关于守卫的官方文档【20†来源】【22†来源】【23†来源】。

以上是Angular 的守护者的详细内容。更多信息请关注PHP中文网其他相关文章！