javascript - AWS-Amplify，如何在 Angular 登录后重定向到另一个 URL？

Question

我使用的是最新的 AWS-Amplify 身份验证组件。它可以成功登录，但登录后我需要将路由发送到另一个我无法实现的 url，它在登录后保持相同的 url。但是我需要设置一个自定义 url，如果用户自动重定向登录成功。

注意:我没有使用 aws-amplify-angular 包 我正在使用这些包，

 "@aws-amplify/ui-angular": "^2.4.4", 
 "aws-amplify": "^4.3.21",

我还检查了这个 import {AuthenticatorService} from '@aws-amplify/ui-angular'; 服务，但在这里我没有找到任何可观察类型的响应，我想这就是我不这样做的原因' 在用户登录成功后立即得到任何事件或东西。成功登录后，我需要立即路由。所以我需要一个事件，这样我才能做到这一点。

我的main.ts:

import { Amplify } from 'aws-amplify'
import awsmobile from './aws-exports'
Amplify.configure(awsmobile)

auth.component.html : [ts 中没有代码]

<amplify-authenticator [signUpAttributes]="['email']"></amplify-authenticator>

& 这样的路由设置，

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'auth',
    component: AuthComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

使用这个包我没有得到任何好的解决方案。请帮助解决这个问题，或者我在配置中遗漏了什么。

Answer 1

我不想使用 aws-amplify-angular 包，但我需要使用，因为那里没有好的解决方案，没有这个包，我尝试使用 Angular Hook ，因为当更改检测运行时我可以从 AuthenticatorService 获得 authenticated & unauthenticated 状态，它来自 import { AuthenticatorService } from '@aws-amplify/ui-angular '; 但使用钩子(Hook) (AfterContentChecked, AfterViewChecked) 它有时工作，有时不工作，有时会发生错误。

[我没有同时使用两个钩子(Hook)，我分别尝试]

所以，最后我需要安装 aws-amplify-angular 以使用 AmplifyService，然后我在下面进行更改，

 constructor(private router: Router, private amplifyService: AmplifyService) { }

  ngOnInit() {
    this.amplifyService.authStateChange$.subscribe(({state, user}) => {
      if (state === 'signedIn') {
        this.router.navigate(['/home'])
      }
    })
  }

不要忘记添加 AmplifyService 以放入 app.module.ts 中的 providers 数组。