我正在使用最新的 AWS-Amplify 的身份验证组件。它可以成功登录,但登录后我需要将路由发送到另一个我无法实现的网址,登录后它保持相同的网址。但我需要设置一个自定义网址,如果用户自动重定向登录成功。
注意:我没有使用 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'
}
];
使用这个包我没有得到任何好的解决方案。请帮助解决这个问题,或者我错过了我的配置中的某些内容。
回答1
我不想使用 aws-amplify-angular
包,但我需要,因为那里没有好的解决方案,没有这个包我尝试使用 angular 钩子,因为当更改检测运行时,我可以获得 authenticated
和 unauthenticated
来自 AuthenticatorService
的状态来自 import { AuthenticatorService } from '@aws-amplify/ui-angular';
但使用钩子 (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
中的 providers 数组。