在 MEAN Stack 中添加路由守卫

在上一节中，我们成功连接了注销按钮并重定向了用户。如果我们未通过身份验证，我们仍然可以通过直接访问该 URL 来编辑或添加帖子。为了防止这种情况，我们需要保护一些路由，以便我们无法这样做。我们将使用以下步骤来添加守卫

1) 我们将在 auth 文件夹中创建一个守卫，并将其命名为 auth.guard.ts。它基本上是一个 typescript 文件。

2) 这是一个我们导出的类，我们将此类命名为 AuthGuard。 这个守卫意味着 angular 添加了一些接口，这些接口强制类添加某些方法，@angular/router 可以在加载路由之前执行这些方法，以检查它是否应该继续或做其他事情。其中一个帮助我们保护路由的接口是 CanActive 接口，我们需要从 @angular/router 导入它。

3) CanActivate 接口的实现方式如下

如果您未使用该 IDE，则必须手动添加此方法。

4) 我们将删除 throw 语句，而是返回一个这样的布尔值。 如果我们返回 true 或一个 promise 或一个最终产生 true 的 observable，那么路由器将知道我们正在保护的路由是可访问的，用户可以访问它。 如果我们返回 false，路由器将拒绝进入那里。 在返回 false 之前，我们还应该将用户导航到别处并重定向。 否则，我们将只阻止页面的加载，而不提供替代方案。

5) 我们不想将 true 或 false 硬编码到该文件中。 我们想从 auth 服务获取该信息，我们在此处存储有关用户是否已通过身份验证的信息。 因此，我们将通过注入它来访问该服务，并且为了将某些内容注入到该 auth-guard 中，我们必须添加 @Injectable 注释，因为我们的 auth-guard 也是一个服务。

6) 现在，我们将在 canActivate() 中使用它。 我们将创建一个新的常量 isAuth 并调用 auth 服务的 getIsAuth() 方法，因为它保存着用户是否通过身份验证的信息，并且当我们登录或注销时，它将被更新。

7) 现在，我们将简单地检查用户是否通过身份验证。 如果用户通过身份验证，那么我们将返回 true。 否则，我们希望让用户离开。 我们将通过注入路由器来做到这一点，并且在注入此路由器之后，我们将使用路由器的导航方法并在方括号 ['/login'] 中传递 /login 以导航到登录页面。

8) 现在，我们需要添加此守卫，我们将它添加到 app routing module 中。 由于它是一项服务，因此我们需要提供它。 因此，我们将添加一个 provider 数组，并且在此数组中，我们将添加我们的 auth guard。

9) 现在，我们需要将它附加到我们要保护的路由。 我们要保护创建和编辑路由。 我们可以添加另一个属性 canActivate，它接受一个我们想要在这些路由上运行的守卫数组，每当路由器尝试加载它们或尝试激活它们时。

现在，两个路由都受到保护，这意味着如果我们现在重新加载并手动输入创建和编辑页面 url，我们将导航到登录页面。

是的，我们的 auth-guard 工作良好。 现在，我们还将防止用户可能做一些注定会失败的事情的情况，这会提供糟糕的用户体验。 我们现在可以避免这种情况，因为现在用户无法进入尝试做他无法做的事情的情况。