Question

我一直在搜索几个小时，但找不到适合我的问题的解决方案...

我的角度应用程序将用户重定向到oAuth2 API，该API通过GET参数返回jwt。我发现了如何使用angular读取GET参数，但是我的问题是另一回事：

{path: 'authenticate', component: AuthenticationComponent}

这是我为AuthenticationComponent设置的路由。它按预期工作，没有任何其他参数，但是只有一个get参数（'/ authenticate？jwt = 123'而不是'/ authenticate'），它不再起作用，并且我的'**'路由已激活。

一种解决方法是将用户重定向到角度页面并将GET参数转换为URL参数（'/ authenticate？jwt = 123'=>'/ authenticate / 123'）的另一个网站（不是用angular编写）。并将我的路由路径更改为“ authenticate /：jwt”，但我想使用我的角度应用程序来完成此操作。

请帮助我

Answer 1

尝试在这样的路线中使用匹配器 { component: AuthenticateComponent, matcher: authenticate}和验证功能就是这样

function authenticate(url: UrlSegment[]) {
    return url[0].path=="authenticate"?{consumed: url}: null;
}

这将匹配到AuthenticateComponent的路由，并且在组件中，您可以像这样this.route.snapshot.queryParams['jwt']获得jwt。希望这会有所帮助。

Answer 2

像这样设置路由器

{path: 'authenticate/:jwt', component: AuthenticationComponent}

并获取组件中的jwt值

// top component
import { Router, ActivatedRoute } from '@angular/router';
// constructor arg
constructor(private route: ActivatedRoute) {}
// user method or ngOnInit inside
this.route.params['value'].jwt

模块中的下一个导入路线模块

// top module
import { RouterModule } from '@angular/router';
// import object
imports: [RouterModule.forRoot([])]

正在工作

Answer 3

如果您将Router作为依赖项注入，则需要像这样navigate：

this.router.navigate( ['authenticate'], { queryParams: { jwt: '123'}});

或者，如果您使用的是routerLink，请按以下方式使用它：

<a [routerLink]="['/authenticate']" [queryParams]="{ jwt: '123'}">Authenticate</a>

这是您推荐的Working Sample StackBlitz。

带有GET参数的Angular 7路由器路径

3 个答案: