问题标签 [angular-guards]

在我的 Angular 应用程序的某些页面上，我想验证会话未过期。

我在本地存储中有令牌，所以在 AuthService 我有：

首先：上面的代码正确吗？

我的 canActivate 函数应该是什么样子的？

我试过这个：

但是当令牌过期时它会给我错误。

我想将多个组件（Component1 | Component2）传递到我的 canDeactivate 防护中，所以我使用下面这样的泛型。

问题- 我想从我传入的每个组件中访问一个属性，那么如何获取通用组件属性？

我必须投还是什么？我可以在调试器中看到该组件在那里，但是直到我在函数内部才能访问属性。

仅供参考 -component.profileForm.dirty不起作用，因为在我进入函数之前它不知道 T 是什么

我读到，由于 Angular 是基于客户端的，因此不能单独信任它来保护路由等。但是，我找不到破解它的方法。

谁能详细解释如何编辑本地 js 文件以绕过路由保护（或使用任何方法）？Firebase Auth 怎么样，有人可以欺骗 Angular 认为您是另一个登录用户吗？

我有使用两者的示例网站。源代码位于此GitHub 存储库，它通过 Firebase 托管在：URL。

我在主页面组件中添加了一些秘密消息（显然未在 GitHub 存储库中显示），该组件受 Guard 保护，使用 FirebaseUI auth 对用户进行身份验证。它们将显示为以下语句：

• “如果破坏 Angular Guard 的秘密消息：< secret-msg >”
  • 这个展示给任何可以查看组件 html 的人
• “如果破坏 Firebase 身份验证的秘密消息：< secret-msg >”
  • 这个展示给任何可以冒充“admin@nowhere.com”登录的人

有人可以看到这些或解释黑客是如何做到的吗？我希望很清楚这篇文章不是试图鼓励黑客攻击，而只是为了了解 Angular 和 Firebase Auth 使用背后的安全模型（我知道 OAuth 本身是安全的，但不确定我是否在auth.service 中使用它。 ts是）。

我是 Angular 的新手。

我怎么解决这个问题？

我已经安装了 AngularCLI: 11.0.7和 Node：12.18.4

我已经安装了一个 Angular 路由保护：

错误：

错误：src/app/_guards/auth.guard.ts:15:5 - 错误 TS2322：类型 'Observable<true | undefined>' 不可分配给类型 'Observable'。输入'布尔| undefined' 不能分配给类型 'boolean'。类型“未定义”不可分配给类型“布尔”。

代码：

我们有一个向导功能，其中我们有一个延迟加载的模块，它有一个父组件和多个子组件。

HomeGuard基本上是指服务，如果没有数据，则在我们在服务中设置值并解析防护之后进行 API调用Behaviour Subject。

这是主题服务的代码

现在，我们有了子路由守卫，即ChildGuard。它基本上订阅了行为主题并检查条件并因此允许进入子组件。

现在，在我们的子路由组件中，每当用户遍历时，我都会更新isActive在防护内部使用的属性 & 进行检查。

问题是当用户点击浏览器后退按钮时，行为主题中未设置值，并且不允许进入子组件。为了尝试解决方案，在WizardHomeComponent内部，我订阅了requestData observable 并尝试再次修改和设置主题，但这会进入无限循环。

我正在为我的 Angular 应用程序做一个保护，除了某些 IP，所有用户都应该被重定向到维护页面。我正在使用第三方 API 获取客户端 IP 地址，例如http://api.ipify.org/?format=json. 我面临的问题是 canActivate 保护在 IP API 发送响应之前执行，因此总是返回 false 然后响应被加载。

canActivate 函数

服务

我正在尝试在 Angular 中构建一个 SubscriptionGuard。这个 Guard 应该检查用户是否为订阅付费。

我有一个奇怪的问题。我将展示代码并在之后进行解释。

订阅.guard.ts

users.service.ts

如您所见，守卫依赖userSubscriptionStatus()于users.service.ts.

在第一个测试阶段，我认为.pipe(take(1))由于某种奇怪的原因无法正常工作，但经过仔细调试，我注意到问题实际上是 SubscriptionGuard 不断调用 UsersService 中的方法。

我尝试了一切，但我不知道如何解决这个问题。这就是我在控制台中得到的：

https://i.stack.imgur.com/l3p2I.png

有人可以帮忙吗？我真的不知道...

[更新 #1] 我更新了代码。现在它看起来像这样：

订阅.guard.ts

users.service.ts

我的控制台现在看起来像这样......

似乎该服务仅在警卫之后才运行。我真的不知道该怎么做...

我有解析器和守卫。在我的基本路由路径上，我有解析器，它可以进行 http 调用 - 获取用于身份验证的令牌。

在儿童路线内，我有警卫的许可。始终守卫在解析器之前执行 - 所以问题是首先执行我的守卫，然后执行 - 我的守卫。

所以解析器看起来像这样：

我怎么能在我的守卫中等待电话

我正在编写一个具有以下结构的模拟电子商务应用程序：

• 应用程序
  • 授权
    • 登录页面
    • 注册页面
    • auth-routing.module.ts
    • auth.module.ts
  • 行政
    • 根页面
    • 管理员路由.module.ts
    • admin.modules.ts
  • 顾客
    • 根页面
    • 目录页
    • 结帐页面
    • 感谢页面
    • 客户路由.module.ts
    • 客户.module.ts
  • 网页未找到
  • 应用程序路由.module.ts
  • app.module.ts
  • app.component.html
  • app.component.css

基本工作流程应该如下：

0. 用户导航到根路径/。
1. 应用程序检测到他们没有登录，因此将他们重定向到/signin.
2. 他们输入他们的凭据并按登录。
3. 如果认证成功，
   1. 如果用户是管理员，他们会被重定向到/admin.
      1. admin-router.module.ts将它们重定向到/admin.
   2. 如果用户是客户，他们会被重定向到/customer.
      1. customer-router.module.ts将它们重定向到/customer/catalog/<default category ID>.
      2. 他们将一些产品放入购物车并继续进行/customer/checkout。
      3. 他们下订单并被重定向到/customer/thankyou.

我不确定的是如何在成功登录后完成重定向。显然，它必须分两个阶段完成：首先到一些公共路径，例如/然后根据用户的角色要么到/customer要么到。/admin第二阶段可能需要由 处理app-routing.module.ts，可能需要使用警卫，但我不确定该怎么做。

编辑 (2021-04-20)

问题可以总结如下：

我需要的是一种方法（最好是声明性的），/根据其状态将应用程序从以下路径之一重定向到：

我有一个守卫，其构造函数类似于下面的代码片段。

是HelperService.replaySubjectPropertyaReplaySubject并且包含值在 的构造函数中初始化HelperService。具体来说，当HelperService依赖注入器初始化时，它必须从服务器获取一个值并将其存储在ReplaySubject.

这是服务构造函数的示例。

回到我的警惕，该canActivate方法需要helperValue填充数据。换句话说，在服务构造函数中发起的服务器请求完成并在重放主题canActivate中填充数据之前，不应完成其评估。helperValue

我从我的 Guard 中看到的是构造函数确实this.helperService.replaySubjectProperty.subscribe(...)按预期调用，但是，http<get>服务构造函数中的命令尚未完成，并且数据尚未填充到helperValue属性中。

如何在执行函数评估之前canActivate等待主题完成填充？helperValue