Ionic 使用AWS Amplify身份验证器和Angular时,移动的浏览器上不显示选项卡栏

t98cgbkg  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(142)

我正在使用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>

然而,这样做的问题是,我永远不会看到登录页面,并且可以未经身份验证访问应用程序。
有什么想法,如何让这个工作正常,并有标签栏显示在移动的浏览器?

0ejtzxu1

0ejtzxu11#

我会使用一个服务来检查用户是否通过身份验证,并根据此条件重定向用户。
类似于:

import { AuthenticatorService } from '@aws-amplify/ui-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private authenticator: AuthenticatorService) { }

  public isAuthenticated = () => this.authenticator?.authenticated;
}

然后,您可以实现一个CanActivate保护:

@Injectable({
  providedIn: 'root'
})
export class CanActivateLoginGuard implements CanActivate {

  constructor(
    private authService: AuthService) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {

    return this.authService.isAuthenticated() || this.router.createUrlTree(['/login']);
  }
}

现在你应该正确地使用Angular 路由器,以检查用户是否可以访问主页,类似于:

const routes: Routes = [
  {
    path: '',
    canActivate: [CanActivateLoginGuard],
    loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最后是TabsPageRoutingModule

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
      }
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabsPageRoutingModule {}

相关问题