问题标签 [angular-route-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.
angular - 如何根据模块条件允许用户路由?
我知道 Angular 中 Auth 守卫的用法,我只是 Angular 的初学者,我刚刚做了一个基于读写访问的基本身份验证,其中包括 isAdmin 或 Isguest 等角色
但是现在我希望该特定用户必须只能访问某些路线
就像我有三个模块
- 一个组件
- B组份
- C 组件
以上所有组件可能是子路由,也可能不是子路由。
我希望 harry 用户可以访问模块 A 和 B
Jackson 可以访问模块 B 和 C
Michel 只能访问模块 A
那么如何在 Angular 中构建这种类型的机制呢?
实际上我知道 Auth 守卫,但我如何组织数据库中的数据以添加组件列表或其他内容等?
我必须在 canActivate 中添加什么条件?
如果明天有一个新组件出现并且我需要访问授权,我需要处理更少并且动态的解决方案。
欢迎任何伟大的想法......!
angular - Angular 9 相同的路由路径不同的组件
我正在尝试解析一组共享相同结构的 URL 的正确路径。我有路径/:id/:areaId
,/:id/:cityId
这是出于 SEO 原因而设计的。当我开始实现它时,我需要知道是否:areaId
存在(通过进行 API 调用),如果不存在,那么我将尝试检查是否:cityId
存在以导航到它。
我首先想到的是canActivate
在我的路线中,因为我需要注入一个服务,这对我来说似乎很自然。我实现了防护并应用于area
组件,我的麻烦canActivate
是false
因为导航停止。我一直在阅读有关使用 urlMatchers 的信息,但是我认为我没有细分所需的所有信息,并且使用诸如Angular 2 具有相同路由的不同组件之类的东西注入服务对我来说似乎是错误的,如果我尝试直接导航它也会失败到 URL 而不是通过主页导航 - 当我直接导航时未定义注入器。
我的问题是,使用警卫或类似的东西,当我的警卫结果为假时,我可以“导航到下一个匹配的 URL”吗?
作为参考,我的后卫看起来像这样:
angular - 在 canActivateChild 返回 true/false 之前,正确等待多个可观察对象在路由保护中返回数据
我的 canActivateChild 路由守卫在确定是否可以激活路由之前没有等待数据从 3 个服务调用返回到后端时遇到问题。我将它连接到 ngRx 存储中并分派 3 个单独的操作,然后使用 forkJoin 返回我认为的 Observable 内容,以确定它们是否都返回数据。这似乎无法正常工作,因为这 3 个中的一个通常在组件中返回 undefined。
据我了解,选择返回一个可观察对象,并且 filter/take(1) 确保满足条件后可观察对象完成。这似乎工作正常,因为它在过滤器中多次命中,最终获得其中 2 个的数据。我不明白如果其中一项没有返回数据,为什么它会返回 true。
关于如何使其正常工作的任何帮助?
angular - Kendo Dialog 的 Angular 服务引发错误
如果用户尝试在不保存表单的情况下导航出页面,我需要通过 CanDeactivate routeguard 触发一个对话框。我正在遵循此处建议的解决方案。
我想自定义示例中使用的确认对话框,使用我们在整个应用程序中使用的自定义模式对话框。我打算使用Kendo Dialog Service来做。我在我的应用程序中的一个现有组件上使用了与链接中给出的完全相同的示例,但它引发了以下控制台错误:
奇怪的是,我确实kendoDialogContainer
在页面上添加了指令。
仪表板.html:
仪表板.component.ts:
}
知道哪里出错了吗?
提前致谢。
angular - CanLoad 守卫可以在 Electron 应用程序中使用吗?
我有来自 BE 的权限 DTO,它决定了用户可以访问的应用程序部分。使用 NgRx 选择器我想在 CanLoad 守卫中使用它,但我无法让它工作。
路线.ts
守卫:
出于某种原因,这个守卫永远不会触发(尝试使用console.log
and debugger
)。当我将其更改为canActive
并在“父”路由文件中执行时,它也不会触发。它触发的唯一时间是我将其更改为canActive
并将其移动到“子”routes.file
获取.routes.ts
编辑: 看起来这是由这样一个事实引起的,一旦模块被加载,'CanLoad' 守卫就不会再次被触发。是否有可能 Electron 一次加载所有内容,因此无法调用该守卫?
angular - Angular 路由是否订阅了 RouteGuards 返回的 observable?
我对 Angular 路由如何处理守卫返回的 observables 感到有些困惑。采取以下路线守卫:
守卫返回一个映射this.sessionQuery.loggedIn$
到true
iftrue
或loginPage
if的 observable false
。
但是,我希望路由守卫会订阅 observable: this.sessionQuery.loggedIn$
observable ,这样当它重新发出时,路由守卫中的逻辑会被重新评估。
然而,测试似乎表明它没有。如果我在应用程序的其他地方订阅这个 observable,我可以看到它重新发出,但console.log
我在上面代码中的调用不会触发。
我希望路由守卫在loggedIn$
observable 发出时触发自动注销false
。
如果路线没有订阅守卫,那么守卫首先返回一个可观察的有什么意义?我觉得我在这里缺少一些东西......
angular - 仅在首次登录时显示初始用户设置组件
我的app.component.html中有 2 个组件 intial-settings 和 app-navbar :
<initial-settings *ngIf="!userFloor"></initial-settings> <app-navbar *ngIf="userFloor"></app-navbar>
还有我的app.component.ts:
我只想在第一次用户登录时显示初始设置组件,以便用户可以设置一些东西。在所有下一个用户登录时,应用程序应该立即显示第二个应用程序导航栏组件,因为用户已经设置了这些所需的东西,并且它们存储在数据库中。
所以,我使用服务来获取数据。如果数据为空,表示用户是第一次登录,则显示初始设置组件。数据保存后,重定向到 app-navbar 组件。如果数据不为空,则显示 app-navbar 组件。
我的问题是,如何实现这个逻辑,这意味着这是显示/隐藏这两个组件的最佳方式,以及如何在用户保存所需的设置数据后从 intial-settings 组件重定向到 app-navbar 组件。
我想我需要使用带有路由器保护的路由器,但我没有找到这个用例的任何例子,我会很清楚地理解。我是Angular的新手,谢谢!
angular - 防止在 ngDestroy 角度导航
如果表单很脏,我想防止用户离开当前页面。虽然这适用于 CanDeactivate 保护,但问题是当我尝试移动到同一父级的另一个子组件时,没有更改路由。这两种情况的唯一共同点是,在这两种情况下,ngOnDestroy() 都会被命中。但是,不幸的是,在 ngOnDestroy 中打开确认对话框(mat-dialog)并不能阻止导航在后台发生。有没有可能的解决方案?
angular - 首次加载 Angular 时重定向到授权端点
我正在尝试找到一个解决方案,该解决方案将在首先加载角度(html和组件)之前重定向到授权端点。这甚至可能吗?或者是否可以在我的主要 app.component 上使用 CanActivate auth guard?
我正在使用身份验证保护,就像任何其他角度项目一样。但它在重定向到授权端点之前首先加载 html。
这是我到目前为止所做的:
(我的路由组件)
(我的路线守卫)