javascript - 使用 Ionic 4 Angular Fire Auth 保护的无限 console.logging
问题描述
我按照本教程中的指导在我的 Ionic 应用程序中实现了一个简单的身份验证保护。如果他们没有登录,它应该将某人重定向到“登录”页面。
当我进入“设置”页面并尝试注销当前用户时,就会出现问题。
如您所见,有一个“限制历史状态更改以防止浏览器挂起”,它会无限进行。事实上,我不得不关闭我的笔记本电脑,因为标签无法关闭。幸运的是,在我关闭它之前,我抓住了一个故障排除屏幕截图。
我的 auth 保护代码,在 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);
}
});
});
}
}
在 app/settings 下的 settings.page 代码:
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 { }
我真的完全无法理解。任何帮助将非常感激。
解决方案
问题是您的 AuthGuard 正在将路由重定向到 /login,并且在您的 /login 路由上您再次拥有 AuthGuard,这会导致从 /login 到 /login 的无限重定向等等。从 /login 路由中删除 AuthGuard 就可以了。
推荐阅读
- c - 不能将 #define 整数作为 uint8_t / int 类型的参数或数组索引传递
- ios - Codable 或 JSONSerialization - 需要从网页中获取一些 javascript 包装的文本
- angular - 输入框下方要显示的Angular Material Chips
- html - html5日期输入中的中心文本
- dart - 不同的第一项,在 Firebase 动画列表中
- bootstrap-4 - Bootstrap 4拆分按钮全宽
- security - 在不受信任的托管服务提供商上使用 jenkins 保护密码
- css - 标准覆盖和样式化的旧滚动条
- url - Vuetify 标准设置(babel/eslint)图像加载失败
- r - 计算 R 中每一行的持续时间到特定百分比变化