问题标签 [angular2-guards]

canLoad 在拒绝或接受时触发两次

canLoad 实现

调用的服务方法

假设 Observale 布尔响应将被返回

我有一个带有根组件和子组件的延迟加载模块。我还有一项服务可以在根组件和子组件以及兄弟姐妹之间共享数据。

背后的用例是一个向导，用户可以在其中分多个步骤设置一些数据。每个步骤的数据都全局存储在服务中，以便父组件和每个子组件都能够访问整个数据。

现在我想为单个步骤创建防护，它应该检查之前的步骤是否已完成（服务中的数据已设置），以防止用户在不执行之前的步骤的情况下通过 URL 访问进一步的步骤。

模块

路由

根组件

我现在的问题是，我在根组件中提供服务，因为我需要为每个组件（根和子组件）提供相同的服务实例。

但我需要在模块中提供警卫，否则我会得到“找不到 CanActivateBranch（警卫）的提供者”

如果我现在想将服务注入警卫，我会得到“没有...服务的提供者”，因为该服务只是在组件中提供，而不是在模块中提供。

有人知道如何解决这个问题吗？

提前非常感谢。

在 Angular 4 上使用 Asp Core 和来自 asp core 的默认模板。警卫工作，但在页面刷新时我得到了不需要的行为。canActivate刷新受保护的路由时，它会在is时简要显示我的登录页面true。下图显示了这种行为。注意刷新屏幕会闪烁红色（我的登录页面）。

重现问题的步骤：

1. 创建项目dotnet new angular
2. 运行dotnet restore和npm install
3. 添加文件auth.guard.ts（下面的代码）
4. 添加文件auth.service.ts（下面的代码）
5. 添加登录组件
6. app.modal.shared.ts将服务和守卫添加到（下面的代码）中的路线
7. 在主页组件上添加登录按钮
8. 运行程序并点击登录按钮
9. 导航到柜台路线
10. 按F5刷新，在显示计数器路由之前会出现登录页面（应该不会显示登录canActivate页面true）

如果您希望查看任何其他代码或有任何疑问，请告诉我。在过去的两天里，我一直在用 Observables、地图和订阅尝试各种事情，但没有结果。任何帮助将不胜感激。提前致谢！

auth.guard.ts

auth.service.ts

app.module.shared.ts

编辑：添加了问题的 gif。

编辑：发现这是server-side prerendering的问题。我目前正在研究如何设置令牌存储服务并将其传递给服务器。

我已经CanDeactive在最新版本的Angular2+中实现了 Guard ，

但是每当我点击浏览器的后退按钮时，第一次它让我留在同一页面上（没关系），但第二次它后退了两步。

这是我的代码：

家庭组件

和家庭卫士

我只想倒退一步。