如何在 Angular 路由中使用路由守卫

介绍

Angular 路由的导航守卫允许授予或移除对导航的某些部分的访问权限。另一个路由守卫，CanDeactivate 守卫，甚至允许您防止用户意外离开具有未保存更改的组件。

以下是可用的 4 种路由守卫类型：

• CanActivate：控制是否可以激活路由。
• CanActivateChild：控制是否可以激活路由的子路由。
• CanLoad：控制是否可以加载路由。对于懒加载的特性模块来说，这变得非常有用。如果守卫返回 false，它们甚至不会加载。
• CanDeactivate：控制用户是否可以离开路由。请注意，此守卫不会阻止用户关闭浏览器选项卡或导航到不同的地址。它只会阻止应用程序内部的操作。

使用 CanActivate 路由守卫

路由守卫通常被实现为实现所需路由守卫接口的类。

让我们以一个使用 CanActivate 路由守卫的示例为例，我们将询问一个 auth 服务用户是否已经认证：

import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot 
} from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class CanActivateRouteGuard implements CanActivate {
  constructor(private auth: AuthService) {}

请注意，我们通过声明 canActivate 方法来实现 CanActivate 接口。在某些情况下，该方法可以选择访问 ActivatedRouteSnapshot 和 RouterStateSnapshot，以获取有关当前路由的信息。

在我们的示例中，canActivate 根据用户是否已认证返回一个布尔值，但它也可以返回一个解析为布尔值的可观察对象或承诺。

为了使用它们，路由守卫应该像服务一样提供。

让我们将其添加到我们的应用程序模块的提供者中：

// ...
import { AppRoutingModule } from './app-routing.module';
import { CanActivateRouteGuard } from './can-activate-route.guard';

import { AuthService } from './auth.service';

最后，您需要将守卫添加到路由配置的一部分。

以下是一个带有路由模块的示例：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';
import { CanActivateRouteGuard } from './can-activate-route.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard',
    component: DashboardComponent,
    canActivate: [CanActivateRouteGuard]
  }
];

现在，只有经过认证的用户才能激活 /dashboard 路由。

请注意，我们在路由定义中提供了一个守卫数组。这意味着我们可以为单个路由指定多个守卫，并且它们将按照指定的顺序进行评估。

实现 CanLoad 和 CanActivateChild 也是以类似的方式完成的。

这就是关于 CanActivate 路由守卫的示例。

使用 CanDeactivate 路由守卫

CanDeactivate 守卫在其实现上有一点不同，因为我们需要提供要停用的组件。这使我们能够检查相关组件是否存在未保存的更改等情况。

让我们以一个使用 CanDeactivate 路由守卫的示例为例：

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

import { DashboardComponent } from './dashboard.component';

在上面的示例中，我们假设仪表板组件类上有一个名为 unsavedChanges 的成员，当存在未保存的更改时会变为 true。除非没有未保存的更改或用户确认，否则路由不会被停用。

这就是关于 CanDeactivate 路由守卫的示例。

结论

在本教程中，您了解了 Angular 中的路由守卫，如 CanActivate 和 CanDeactivate。

如果您想了解更多关于 Angular 的信息，请查看我们的 Angular 主题页面，了解练习和编程项目。