javascript - 使用 Ionic 4 Angular Fire Auth 防护进行无限 console.logging

Question

我按照this tutorial中的指示进行操作在我的 Ionic 应用程序中实现一个简单的身份验证防护。如果某人未登录，它应该将其重定向到“登录”页面。

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

正如您所看到的，存在无限持续的“限制历史状态更改以防止浏览器挂起”。事实上，我不得不关闭笔记本电脑，因为选项卡无法关闭。幸运的是，我在关闭它之前截取了一张故障排除屏幕截图。

我的身份验证保护代码，位于应用程序/服务/用户下:

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

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

Answer 1

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