0

我的 Ionic/angular 应用程序遇到了一个奇怪的问题。我在用着

  • “@angular/core”：“~13.2.2”
  • “@capacitor/core”：“3.4.0”
  • “@capacitor/ios”：“3.4.0”
  • “@angular/fire”：“^7.2.0”
  • “火力基地”：“^9.6.6”，

它在 web 版本和 Android 上运行良好，但是当我编译到 iOS 时，我只得到一个空白屏幕。我已将问题缩小到 auth-guard

我试过使用

  • @angular/fire/compat/authguard - 空白屏幕
  • 不使用任何警卫 - 工作正常
  • 写我自己的守卫并总是返回真实 - 工作正常
  • 写我自己的守卫，下面的代码 - 空白屏幕

以下是 app-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '../guards/auth.guard';
import { AutoLoginGuard } from '../guards/auto-login.guard';
import { TabsPage } from './tabs.page';
const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
      },
      {
        path: 'dashboard',
        loadChildren: () =>
          import('../pages/dashboard/dashboard.module').then(
            (m) => m.DashboardPageModule
          ),
        canActivate: [AuthGuard],
      },
      {
        path: 'welcome',
        loadChildren: () =>
          import('../pages/welcome/welcome.module').then(
            (m) => m.WelcomePageModule
          ),
        canActivate: [AutoLoginGuard],
      },
      {
        path: 'login',
        loadChildren: () =>
          import('../pages/login/login.module').then((m) => m.LoginPageModule),
        canActivate: [AutoLoginGuard],
      },
    ],
  },
];

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

和 auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Auth, onAuthStateChanged } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private auth: Auth, private router: Router) {}

  canActivate(): Promise<boolean> {
    return new Promise(async (resolve, reject) => {
      onAuthStateChanged(this.auth, async (user) => {
        if (user) {
          console.log('User authenticated');
          resolve(true);
        } else {
          console.log('User redirected to login');
          this.router.navigateByUrl('/', { replaceUrl: true });
          reject(false);
        }
      });
    });
  }
}

知道可能导致此问题的原因是什么吗？

4

1 回答 1

1

找到了答案（或者更确切地说是 Simon Grimm）：这是电容器 SDK 中的一个错误。初始化 auth 模块时，您必须针对 Capacitor 进行调整：

app.module.ts：

import { Capacitor } from '@capacitor/core';
import { indexedDBLocalPersistence, initializeAuth } from 'firebase/auth';
import { getApp } from 'firebase/app';

...
imports: [ ...

provideAuth(() => {
      if (Capacitor.isNativePlatform()) {
        return initializeAuth(getApp(), {
          persistence: indexedDBLocalPersistence,
        });
      } else {
        return getAuth();
      }
    }),
...
]
于 2022-02-10T14:28:33.113 回答