Auth0 Angular - 无法匹配任何路线答案

【问题标题】：Auth0 Angular - Cannot match any routeAuth0 Angular - 无法匹配任何路线
【发布时间】：2020-06-22 21:29:54
【问题描述】：

我有一个 Angular 应用程序，我正在尝试与 Auth0 集成。我遵循了这两个教程：

https://auth0.com/docs/quickstart/spa/angular2/01-login

https://auth0.com/docs/quickstart/spa/angular2/02-calling-an-api

这是我的项目的设置：

AuthService

从第一个教程链接复制+粘贴

登录控制器

export class LoginComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
      this.authService.login();
  }
}

应用路由模块

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'profile', component: ProfileComponent, resolve: { queues: ProfileResolver}, canActivate: [AuthGuard]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorService,
      multi: true
    }
  ]
})
export class AppRoutingModule { }

我已成功登录，但是当 auth0 进行回调时，它会导航到 http://localhost:4200/profile?code=[code]&state=[state]，然后 Angular 会抛出“无法匹配任何路由”。

我的问题是：

代码和状态参数有什么用？
我应该怎么做才能正确处理这些问题，以便我的网站可以正确路由到 /profile？

非常感谢！

【问题讨论】：

代码参数被重新调整，因为应用程序正在执行授权代码流。状态参数用于缓解 CSRF 攻击。 auth0.com/docs/api-auth/tutorials/authorization-code-grant-pkce auth0.com/docs/protocols/oauth2/oauth-state

标签： javascript angular typescript rxjs auth0

【解决方案1】：

这是auth0-spa-js 的一个令人讨厌的问题，在生产中让我很头疼。该问题在this thread 中进行了描述。我如何解决它是更改身份验证服务中handleAuthCallback 函数的最后一行：

this.router.navigate([targetRoute])

到：

this.router.navigate([name-of-path-you're-redirecting-to]).

【讨论】：