问题标签 [angular-router-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 投票
2 回答
565 浏览

angular - 使用重定向、回调和未知路径处理 Guard

对于一个项目,我有一个带有这些可用路径的路由器:

AuthenticationComponent 的 Injectable Service 正在处理路由器。用户如果未通过身份验证,将被重定向到 /authentication,无论路由是什么,如果他已登录,则重定向到 /dashboard。

问题是如果我想重新加载 /leaderboard 页面,它每次都会重定向到 /dashboard,它也不应该是身份验证服务的工作。

我已经尝试过,使用本指南来了解守卫,这使我能够处理通过 /dashboard 和 /leaderboard 的基本导航、Auth0 的回调和刷新,但是当访问我的登录页面时,它已经过身份验证,它是不重定向,与未知路径相同的行为。

有没有办法让我检查我的路由器是否知道提供的路由,并在用户登录或未登录时正确重定向?

我的后卫:

我目前的路由器:

0 投票
1 回答
10339 浏览

angular - 延迟加载模块上带有第二个 canActivate 保护的路由器无限循环

我有一个带有延迟加载模块的 Angular 4.3.6 应用程序。这是一个部分根路由器:

我在这两个示例模块中的子路由器:

舰队:

选择新密码:

AuthenticationGuard调用如下所示的方法:

所以,如果用户的会话没问题,它就会激活路由。如果用户的密码过期,它会将用户重定向到选择新密码模块。如果没有会话,则重定向到登录。

ChoosePasswordGuard做类似的事情,但只保护选择新密码组件(通常使用不同的工具来设置密码):

这在模块拆分之前有效。

现在,我陷入了重定向循环。在路由器跟踪打开的情况下,我观​​察到以下顺序。用户登录并且AuthenticationGuard更正重定向到 /password/set 模块,并移交给ChooseNewPasswordGuard

  1. NavigationStart (id: 4, url: '/password/set')
  2. RoutesRecognized {id: 4, url: "/password/set", urlAfterRedirects: "/password/set", state: RouterStateSnapshot}
  3. GuardsCheckStart {id: 4, url: "/password/set", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
  4. GuardsCheckEnd {id: 4, url: "/password/set", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true }
  5. NavigationCancel {id: 4, url: "/password/set",原因: "" }

并且这个循环重复。

(如果我将整个 ChooseNewPasswordGuard 替换为 ,它也会重复return Observable.of(true);

/编辑:即使我/#/password/set在 URL 栏中提供,我也会被重定向到根页面 ( )...

问题:

  1. 既然模块是延迟加载的,我在我的路由器或守卫中做错了什么来强制这个循环?我特别困惑,shouldActivate: true其次是NavigationCancel reason: ""

  2. 这是否与我直接在 AuthenticationGuard 中重定向这一事实有关,并且现在这个保护应用于我的主要空根路由({ path: '', redirectTo: 'fleet', pathMatch: 'full' })它总是被调用并重定向,即使我已经设置了路径?

  3. 我真的需要canActivate在我的子路由和我的根路由中重复守卫吗?

  4. 像往常一样,欢迎任何其他评论。

0 投票
1 回答
996 浏览

angular - Routes Guards 导致错误的 Route Navigation 行为

我在尝试浏览不同的路线时遇到问题。

我有两个不同的路线模块。

app.routes.ts

仅包含LoginPage

使用PreventLoggedInAccess.canActivate,如果用户已经登录,则将他重定向到带有/app前缀和子路由的登录部分home。它定义为:

pages.routes.ts

包含/app只有在用户登录时才能访问的所有子路由。这是通过以下方式实现的AuthGuardService.canActivateChild

/login如果用户未登录,后者将重定向到。它定义为:

当我从导航app/home到它时,它只会在导航两次后app/contents进入。ContentsComponent所以,如果我做两次this._router.navigate(['app/components']);它会起作用,如果我只做一次,路线会在 1ms内从app/hometo变为,而如果我第二次做它会改变路线。同时,如果我在里面并尝试导航到它会改变路线就好了。app/routeapp/homeapp/contentsapp/home

isAuthenticated工作正常。app两个 authguard 都工作得很好,所以,如果我在未登录时尝试访问任何子路由,我会被重定向到 login,如果我login在登录时尝试访问,我会被重定向到app/home.

我设法调试了一下,我注意到以下流程:

  • 第一次尝试app/home--> app/contents
    • navigate(['app/contents'])叫做
    • PreventLoggedInAccess.canActivate叫做
    • AuthGuardService.canActivateChild叫做
  • 第二次尝试app/home--> app/contents
    • navigate(['app/contents'])叫做
    • AuthGuardService.canActivateChild叫做

当然,预期的行为是第二​​种。

编辑

删除解决了this._router.navigate([/app/home]);问题PreventLoggedInAccess.canActivate

但是,我仍然不明白为什么PreventLoggedInAccess.canActivate在导航到一个app孩子时会调用它,即使它AuthGuardService.canActivateChild是依附的?为什么只在第一次尝试时调用它?

0 投票
2 回答
2648 浏览

angular - 等待解析器中的状态 (ngrx)

现在我有一个解析器调用标准服务并返回一个 Observable:

我想用 ngrx 效果替换它并存储。当解析器运行时,我想调度被效果拦截的requestAction,这会产生http请求。返回数据后,我将 dataReceivedAction 与数据一起作为有效负载发送。

基本上我想在解析器中调度一个动作并等到新数据成为存储的一部分。我尝试这样做:

它不起作用,我的意思是解析器不会渲染组件,但是当我在每个返回的 Observables 结束时添加

记录相同的数据。我做错了什么?

0 投票
2 回答
2459 浏览

angular - 将一个服务的角度依赖注入到另一个服务中以进行路由保护

在我的 Angular 应用程序中,我有两个服务,一个处理 http 层,另一个只是一个路由守卫,用于实现canActivate与第一个服务的状态相关的方法。例如:

后端服务:

routeguard.service:

我相信我在错误的位置提供了其中一项服务?目前providers,我的app.module. 但是我可以通过 console.log 语句判断,backend.service当它作为路由的一部分被调用时与组件使用它时是分开的,所以数据是不同的,数据总是作为“初始”返回当在 canActivate 方法中检查时,尽管已将其设置为来自组件的其他内容。希望我清楚地解释了这一点,我对角度还是很陌生。

我是否需要在不同的位置提供其中一项服务,还是我完全做错了什么?感谢您的任何指示。

0 投票
1 回答
1545 浏览

angular - Guard 中的 this.router.navigate 将来会阻止路由

我在 Angular 4 中设置了两个守卫——一个在用户尝试访问受保护的路由时将用户重定向到登录页面,另一个将用户从“主页”重定向到欢迎页面(如果他们还没有到达那里)。

守卫本身工作得很好……但我注意到一些非常奇怪的行为。在 WelcomeTraveler 守卫中添加重定向this.router.navigate会使应用程序处于我无法从第一个守卫访问受保护路由的状态即使在登录后也是如此。我只是不断被发送回主页。

这是我的守卫:

这是路由表的片段:

this.router.navigate守卫中的存在WelcomeTraveler似乎导致了问题,即使这些线从未被击中!登录后,我在尝试路由到个人资料后立即被送回“家”(成功通过第一个守卫后)。如果我删除导航线 - 问题就会消失。

有任何想法吗?

0 投票
1 回答
1433 浏览

angular - Angular Route Guard CanActivate 停止路由

我正在尝试检查用户已经选择了要登录的公司的天气。如果他们选择,那么他们会看到那些公司员工。否则,我们将重定向到登录页面。

我已经使用 Angular Route Guard 来做到这一点。但它没有继续这条路线并停在那里,尽管我返回真实。如何继续路线

路由配置

认证卫士

0 投票
1 回答
1941 浏览

angular - Angular 4 在不更改 URL 的情况下解决保护重定向?

如果我的解析保护失败,我想显示 404 页面/组件,但我不希望浏览器的 URL 更改。

我可以在不更改解析中的 URL 的情况下进行导航,如下所述

这在从应用程序中访问此警卫时有效。但是,如果我直接导​​航到页面,例如:/posts/1234路由器将 URL 更改为后备路由(认为 404 组件已正确显示)。如果我不跳过位置更改,一切都会按预期工作,但是我的 url 中有我不想要的 '/404'。

目前有没有办法用路由器实现这一点,或者它是一个错误?

0 投票
0 回答
1016 浏览

angular - Angular 4 - Guard 导致错误无法读取未定义的属性“创建”

  • 我创建了一个Guard ( LoggedInGuard ),我在我的 AppModule 中导入的AuthModule定义了它。
  • 我还创建了一个仪表板模块,在他的路由模块中它使用来自 AuthModule 的 LoggedInGuard

在 DashboardModule 中使用 LoggedInGuard 时,会导致:

注意 - 当我使用 aot=false 构建应用程序时,它工作正常

我的应用模块:

我的授权模块:

我的仪表板路由:

注意 - 我使用的是角度 4.2

0 投票
1 回答
5458 浏览

angular - 以 Angular 5 显示/隐藏链接的最佳方式

我目前有一个主页,可以路由到我公司运行的所有不同工作流程。我们有大约 15 个不同的工作流程,每个工作流程都由一个用户角色保护。如果您在数据库中没有正确的用户角色,您将看不到指向该页面的相应链接。我们保护服务器端点,但我担心的是向人们展示链接或不向他们展示链接的最佳方式是什么我宁愿不重复代码。

这是一种方法:

我有一个这样的html页面

我有这样的身份验证服务:

我有一个路由如下的路由器:

AuthGuard 只是检查用户是否登录,然后使用路由中的数据检查用户是否具有正确的角色。

如您所见,我们在两个不同的位置使用字符串“users.user-admin”。


我认为我们应该有一个带有两个警卫的路由器。一名守卫将检查用户是否已登录,另一名守卫将检查用户是否具有正确的角色。该角色将在此处进行硬编码,如下所示:

然后html看起来像这样:

像我的方法这样的方法会起作用,还是有更好的更有角度的方法来做到这一点?我在文档中找不到任何关于此类的内容。如果您还可以提供文档加分。