问题标签 [angular-guards]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
2318 浏览

angular - 类 'AuthGaurd' 错误地实现了接口 CanActivate

我是初学者,并且在我遵循这些教程时从教程中学习 Angular,当我CanAcivate按照他在教程中所做的那样实现接口时,它会显示错误

类“AuthGaurd”错误地实现了接口“CanActivate”。“AuthGaurd”类型中缺少属性“canActivate”,但在“CanActivate”类型中是必需的。ts(2420)

这是 Canactivate 的实现

这是进口

我将导入从更改import { CanActivate } from '@angular/router/src/utils/preactivation';import { CanActivate } from '@angular/router; But not work

我还在 canActivate 中添加了以下内容,因为我在 StackOverflow 上观看了一个答案,但它对我也不起作用

0 投票
4 回答
7192 浏览

angular - Angular 6:未捕获(承诺):错误:StaticInjectorError(AppModule)[RoleGuardService]

我想在我的 Angular 6 项目之一中使用 RoleGuard 服务。我role-guard.service.ts在“ _guards”文件夹下创建了一个文件 - ''。现在在路由文件中,我声明了与下面相同的内容并尝试实现相同的内容。请注意,我有一个共享模块,我没有在导出中声明 roleguardservice。

下面是我的app.module.ts file

我想更改路线取决于用户角色。就像,如果用户角色类型 1,那么他将重定向到“edit-account-info”,否则(如果用户角色类型 2)他将重定向到“代理/编辑帐户信息”。如果用户角色类型 2 想要访问路径“edit-account-info”,他将转到“unauthorize”页面。

但是要实现它,当我想访问页面“edit-account-info”时,它会向我显示错误:

未捕获(承诺):错误:StaticInjectorError(AppModule)[RoleGuardService]: StaticInjectorError(Platform: core)[RoleGuardService]: NullInjectorError: No provider for RoleGuardService!错误:StaticInjectorError(AppModule)[RoleGuardService]: StaticInjectorError(Platform: core)[RoleGuardService]: NullInjectorError: No provider for RoleGuardService!…………

以下是role-guard.sevice.ts文件内容:

0 投票
0 回答
322 浏览

angular - Angular 7重定向到上次访问的页面

我正在构建一个 Angular 应用程序,我想在其中将用户重定向到他登录后上次访问的页面。这个想法是,如果您已登录,我将从本地存储中获取上次访问的页面(将在每次导航时更新)并将重定向到那里。如果您未登录,则转到登录页面。

为此,我一直在努力寻找实现这一目标的最佳方法,因为我相信有几种选择。

1-使用应用初始化程序。想法是定义一个我可以设置为在初始化应用程序时执行的函数,以检测重定向到的位置。问题是我得到了一个错误,因为我可以在此时注入路由器,因为它还没有被创建。另一种方法是使用 Injector 类生成一个 Router 实例并从那里重定向。这似乎相当肮脏。

2-使用路由解析器。尽管这似乎更像是准备随后将显示的数据,但在这里我可以定义导航到基本路径时的功能''。起初这很好用,但是如果我点击返回按钮到主仪表板页面(假设我们在访问该站点时被重定向到“/dash/msgs”,然后我们想返回到路径“/dash/main” ) 然后再次执行解析器,存储的导航尚未更新(这发生在导航结束事件的服务上),因此正在检索旧值,并且来自 RouterStateSnapshot 的 state.url 向我显示主路径'/'而不是结束路径'/dash/main'。所以我最终总是在同一个页面上 - 当我在没有登录的情况下访问然后我登录并开始使用同一个浏览器窗口导航时,情况并非如此

3-使用带有罐子的守卫激活。这对我来说似乎也不是正确的地方。我为我的主仪表板模块(路径'/dash')定义了一个保护,当从新的浏览器窗口访问并且用户登录时,它将始终执行。这将在第一个保护检测到您确实已登录之后发生in,但是如果本地存储中有一些导航 url 并重定向到那里,那么这个守卫将返回 false,这在大多数情况下都是如此。这种方法效果很好,但它有一些延迟,对我来说似乎不是正确的方法,因为我希望在早期阶段检测到导航的位置

有人可以指出我处理这个问题的正确策略吗?提前致谢!

0 投票
1 回答
1164 浏览

angular - Angular 7 - 使用警卫时有时不打开垫选择输入

我从 Angular 中的多个应用程序结构开始,我发现在 Angular Material 中的 mat-select 上有奇怪的行为......

我无法打开下拉菜单 - 没有出现覆盖,并且调度了正常的单击事件,而不是使用 e.preventDefault 打开材料。要检查此行为,我使用(单击)处理程序来记录事件。

如果有效 - 没有事件日志(e.preventDefault 调用,选择正常打开的覆盖)如果没有 - 单击事件记录 - UI 上的任何更改

所以...首先我检查了这可能是材料问题,所以我切换到NG-Zorro - 从 angular.io 框架推荐并且仍然相同...

经过数小时的调试、测试和搜索,我发现问题出在 AuthGuard 上——仍然不知道为什么,但让我先描述一下身份验证流程。

登陆页面->使用Google登录并重定向到应用程序->授权在init(在app.component中)上调度的动作(ngrx)->带有监视gapi令牌并调度auth成功动作的ngrx效果->效果并为用户调用api数据 -> 登录成功。

我准备了这个 auth.effect 进行测试

所以你可以看到动作流。

Auth.reducer

和简单的选择器

最后守卫除了等待用户加载之外什么都不做

这被添加到路由

所以......对我来说一切都很好(如果有人对此代码有任何好的做法 - 任何反馈都会很好:))。但是当我运行这个并刷新页面选择器时,有时需要工作。好吧,大部分时间。但是当我登陆然后登录然后登录后我被重定向到页面一切似乎工作正常。问题只有当我登录时直接调用此路由时。

看下面的动画 在此处输入图像描述

另一个轨道是,当我只是return true在那个守卫中,或者尽可能地使它与此相似,例如使用一些延迟管道或奇怪的东西时,当我将其映射为 true 时,它​​就起作用了。但是通过预期的检查它不会。

我将非常感谢任何建议,因为我在最后 4 天都在重构、测试和调试上花费了 :(

这是带有示例项目的仓库:https ://github.com/wojtek1150/mat-select-error

问候,W

0 投票
2 回答
384 浏览

angular - 基于守卫的同一路径上的延迟加载模块

我想基于同一(“”)路径(主页)上的用户角色加载特定的 Angular 模块。假设我有两个模块,名为 AdminModule 和 OperatorModule。如果角色是 ADMIN,那么我想加载 AdminModule,否则加载 OperatorModule。我想用 Angular Guard 存档。

现在app.routing.ts我添加了以下代码:

我已经使用以下代码实现了 AngularGuard,它必须显示 OperatorModule:

在第一条路线失败后它以某种方式停止寻找,我做错了什么吗?

djerid 的 StackBlitz 示例:https ://stackblitz.com/edit/angular-vd4oyu?file=app%2Fapp-routing.module.ts

===

Matcher 也不起作用:

0 投票
1 回答
962 浏览

angular - Angular Guard CanLoad 单元测试

我对 Angular 7 比较陌生,来自 AngularJS,我编写了一个实现 CanLoad 的守卫,它在没有正确声明加载模块的情况下阻止用户。它检查用户是否已登录以及用户是否有路由所期望的声明。

守卫工作,但是我在为它编写单元测试时遇到了麻烦。

我在下面的单元测试不起作用:

它不允许我新建一条路线。我可能只是做错了测试。有人能帮忙吗?

0 投票
2 回答
689 浏览

angular - CanActivateChild 未运行

我有一个问题,当我注销并导航到时/,不会执行 canActivateChild 守卫以重定向到登录。

我的要求是没有登录就无法访问任何应用程序。

这是我的根路由配置:

这是我的 AuthGuard ( userState) 调用自canActivateChild

登录时,我导航到其中一个/redirectqueryParam(如果存在)。在注销时,我导航到/,想法是它将重定向到dashboard,并且由于仪表板受到保护且用户为空,因此转到/login?redirect=dashboard

一切正常,除了最后一部分。当我注销时,它会重定向到仪表板,但不会激活 canActivateChild 守卫,成功完成重定向到仪表板。如果我替换canActivateChildcanActivate,它将按需要工作。

更多细节:

0 投票
1 回答
522 浏览

angular - 如何在 Angular 7 路由的匹配器函数中进行 API 调用

我在 Angular 7 中有一个路由匹配器函数,需要调用 API 来获取数组并检查该数组是否包含 URL slug

我尝试了什么: 我在 APP_INITIALIZER 上调用 API 并将其保存在 localStorage 上,问题是我有没有 localStorage 的 Angular Universal,也无法将任何服务注入到 typescript 类之外的函数中以使用 CookieService 或 HttpClient 服务。尝试使用 Angular 防护,但不知道如何跳到路由配置数组中的下一个对象,以防在类别数组中找不到 URL。

我现在拥有的:

我希望以某种方式将服务注入函数 DealsMatcher 或在没有注入的情况下执行 ajax 请求。如果使用角度防护,也跳到下一条路线检查。

0 投票
2 回答
3809 浏览

angular - 为子组件启用candeactivate

我正在开发一个角度应用程序,如果用户在编辑时离开页面时未保存更改,我需要显示一条警报消息。

我已经为此在路由中创建并注册了一个 candeactivate 防护,它在父组件中运行良好。但不能在子组件中工作。如何解决这个问题?

“创建”运行良好,但地址组件无法正常工作,因为它是子组件!

确认卫士.ts:-

0 投票
1 回答
243 浏览

angular - 子项角度路由中的不同 RoleGuard

我想知道您是否使用 RoleGuard 来检查是否有人可以激活路径,并且您希望在子项目中使用不同的 RoleGuard 是可能的:

我已经尝试过,但我无法使用不同的 RoleGuard 访问路径

因此,只有管理员可以进入此路径,但我想允许操作员进入路径 test/money。

谢谢指教。