无限 console.logging 使用 Ionic 4 Angular Fire Auth guard

Question

我按照 this tutorial 中的说明在我的 Ionic 应用程序中实现了一个简单的 auth guard。如果他们没有登录，它应该将某人重定向到 'login' 页面。

当我进入 'settings' 页面并尝试注销当前用户时出现问题。

如您所见，有一个 'throttling history state changes to prevent the browser from hanging' 可以无限进行下去。事实上，我不得不关闭我的笔记本电脑，因为标签无法关闭。幸运的是，我在关闭它之前抓取了一张故障排除屏幕截图。

我的授权码，在app/services/user下：

import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router,
} from '@angular/router';
import { Observable } from 'rxjs';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../../../environments/environment';


firebase.initializeApp(environment.firebase);

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    return new Promise((resolve, reject) => {
      firebase.auth().onAuthStateChanged((user: firebase.User) => {
        if (user) {
          resolve(true);
        } else {
          this.router.navigateByUrl('/login');
          resolve(false);
        }
      });
    });
  }
}

settings.page代码，在app/settings下：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AlertController } from '@ionic/angular';

// Firebase imports
import * as firebase from 'firebase';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.page.html',
  styleUrls: ['./settings.page.scss'],
})
export class SettingsPage implements OnInit {

  constructor(
    public alertCtrl: AlertController,
    private afAuth: AngularFireAuth,
    private router: Router
  ) { }

  ngOnInit() {
  }

  async logOut() {
    const confirm = await this.alertCtrl.create({
      header: 'Logging out?',
      buttons: [
        {
          text: 'Yes',
          handler: () => {
            this.afAuth.auth.signOut();
            console.log('Signed out');
          }
        },
        {
          text: 'Wait, no',
          handler: () => {
            console.log('Not clicked');
          }
        }
      ]
    });
    return await confirm.present();
  }

}

最后，我的应用程序-routing.module.ts，在应用程序下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './services/user/auth.guard';

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'home/:id', loadChildren: './home/home.module#HomePageModule', canActivate: [AuthGuard] },
  { path: 'landing', loadChildren: './landing/landing.module#LandingPageModule', canActivate: [AuthGuard] },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule', canActivate: [AuthGuard] },
  { path: 'signup', loadChildren: './signup/signup.module#SignupPageModule', canActivate: [AuthGuard] },
  { path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule', canActivate: [AuthGuard] },
  { path: 'add-list', loadChildren: './add-list/add-list.module#AddListPageModule', canActivate: [AuthGuard] },
  { path: 'clicked-list', loadChildren: './clicked-list/clicked-list.module#ClickedListPageModule', canActivate: [AuthGuard] },
];

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

实在是想不通。任何帮助将非常感激。

Answer 1

问题是您的 AuthGuard 正在将路由重定向到 /login，并且在您的 /login 路由上您再次拥有 AuthGuard，这会导致从 /login 无限重定向到 /login 等等。从 /login 路由中删除 AuthGuard 就可以了。

无限 console.logging 使用 Ionic 4 Angular Fire Auth guard

Infinite console.logging using Ionic 4 Angular Fire Auth guard

javascript

ionic-framework

firebase-authentication

angular

ionic4