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 挂钩，因为当更改检测运行时我可以从来自 import { AuthenticatorService } from '@aws-amplify/ui-angular'; 的 AuthenticatorService 获得 authenticated 和 unauthenticated 状态，但是使用钩子（AfterContentChecked、AfterViewChecked）它有时有效，有时无效& 有时会发生错误。

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

所以，最后我需要安装 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。

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

AWS-Amplify, How do I redirect to another URL after sign-in in angular?

javascript

angular

amazon-web-services

aws-amplify