我正在使用Ionic 6,Angular 13和AWS Amplify Authenticator构建一个应用程序。我已经成功实现了这一点,但我遇到的问题是标签More不能在移动的浏览器上呈现。
我根据这里的文档将amplify authenticator组件添加到app.component.html
文件中。app.component.html
代码:
<ion-app>
<amplify-authenticator [socialProviders]="['apple', 'google']">
<ng-template amplifySlot="header">
<div style="padding: var(--amplify-space-large); text-align: center">
<img
class="amplify-image"
alt="Amplify logo"
src="https://docs.amplify.aws/assets/logo-dark.svg"
/>
</div>
</ng-template>
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<ion-router-outlet></ion-router-outlet>
</ng-template>
</amplify-authenticator>
</ion-app>
我遇到的一个问题是,标签栏不呈现在移动的浏览器eidogg. iPhone Chrome或Safari浏览器。它会显示在桌面浏览器没有任何问题,奇怪的是,如果我把手机水平它会显示标签栏,但不垂直。
苹果手机:
Web(桌面):
如果我将app.component.html
代码更改为以下代码,它将工作:
<ion-app>
<amplify-authenticator [socialProviders]="['apple', 'google']">
<ng-template amplifySlot="header">
<div style="padding: var(--amplify-space-large); text-align: center">
<img
class="amplify-image"
alt="Amplify logo"
src="https://docs.amplify.aws/assets/logo-dark.svg"
/>
</div>
<ion-router-outlet></ion-router-outlet>
</ng-template>
</amplify-authenticator>
</ion-app>
然而,这样做的问题是,我永远不会看到登录页面,并且可以未经身份验证访问应用程序。
有什么想法,如何让这个工作正常,并有标签栏显示在移动的浏览器?
1条答案
按热度按时间0ejtzxu11#
我会使用一个服务来检查用户是否通过身份验证,并根据此条件重定向用户。
类似于:
然后,您可以实现一个
CanActivate
保护:现在你应该正确地使用Angular 路由器,以检查用户是否可以访问主页,类似于:
最后是
TabsPageRoutingModule
: