如何向守卫传递参数？

发布于 2025-01-13 16:18:04 字数 439 浏览 1 评论 0原文

我有基于项目的 Angular 12。

我需要根据收集令牌的参数来保护路由：

 export const authenticationRoutes = [
  {
    path: 'reset-password/token/:token',
    component: ResetPasswordShellComponent,
    canActivate: [ResetPasswordGuard]
  }
];

ResetPasswordGuard 是一个调用 Web 服务的防护程序，并且应该发送作为路径一部分的令牌值：

path: 'reset-password/token/:token'

我的问题是有什么如何将令牌值从路径传递到守卫（ResetPasswordGuard），以便将其发送到Web服务？

原文

I have project-based angular 12.

I need to secure a route based on a parameter which is colled token:

 export const authenticationRoutes = [
  {
    path: 'reset-password/token/:token',
    component: ResetPasswordShellComponent,
    canActivate: [ResetPasswordGuard]
  }
];

ResetPasswordGuard is a guard that makes calls to web service and should send token value which is part of the path:

path: 'reset-password/token/:token'

My question is there any way to pass token value from the path to guard(ResetPasswordGuard) so it will be sent to the web service?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍暮颜 2025-01-20 16:18:04

当我们在 ResetPasswordGuard 上实现接口 CanActiavte 时，函数 canActivate 有 2 个参数，第一个是 ActivatedRouteSnapshot。 ..

canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean {
        // your  logic goes here
        console.log('[ResetPasswordGuard]', next.params); // <-- This should print {token: 'somevalue'}
        ....
        ....
    }

因此，人们可以使用以下方式轻松地从中读取路径参数...

const tokenInPath = next.params.token || ''

使用 ActivatedRouteSnapshot 人们可以访问 URL 中的全部数据。 ActivatedRouteSnapshot 还提供 Observable 接口，用于读取/接收预期信息（路径参数、查询参数等）。

`所见即所得` => `所见即所得`

When we implement the interface CanActiavte on ResetPasswordGuard, the function canActivate takes 2 parameters, first of which is ActivatedRouteSnapshot...

canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean {
        // your  logic goes here
        console.log('[ResetPasswordGuard]', next.params); // <-- This should print {token: 'somevalue'}
        ....
        ....
    }

So one can easily read path parameters from it using...

const tokenInPath = next.params.token || ''

Using an ActivatedRouteSnapshot one has access to the whole data in the URL. ActivatedRouteSnapshot also provides Observable interfaces for reading/receiving intended information(path params, query params etc...).