使用 Ionic 4 Angular Fire Auth 保护的无限 console.logging答案

【问题标题】：Infinite console.logging using Ionic 4 Angular Fire Auth guard使用 Ionic 4 Angular Fire Auth 保护的无限 console.logging
【发布时间】：2019-05-16 08:15:04
【问题描述】：

我按照this tutorial 中的指示在我的 Ionic 应用程序中实现了一个简单的身份验证保护。如果他们没有登录，它应该将某人重定向到“登录”页面。

当我进入“设置”页面并尝试注销当前用户时出现问题。

如您所见，“限制历史状态更改以防止浏览器挂起”会无限进行。事实上，我不得不关闭我的笔记本电脑，因为标签无法关闭。幸运的是，在我关闭它之前，我抓住了一个故障排除屏幕截图。

我的身份验证代码，在 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();
  }

}

最后，我的 app-routing.module.ts，在 app 下：

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 { }

我真的完全无法理解。任何帮助将非常感激。

【问题讨论】：

标签： javascript angular ionic-framework firebase-authentication ionic4

【解决方案1】：

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

【讨论】：