Бесконечные console.logging с использованием Ionic 4 Angular Fire Auth guard - PullRequest
Новая
       60

Бесконечные console.logging с использованием Ionic 4 Angular Fire Auth guard

0 голосов
/ 15 декабря 2018

Я следовал указаниям этого урока , чтобы реализовать простую аутентификацию в моем приложении Ionic.Он должен перенаправить кого-либо на страницу входа в систему, если он не вошел в систему.

Проблема возникает, когда я захожу на страницу настроек и пытаюсь выйти из системы текущего пользователя.

enter image description here

Как видите, существует «изменение состояния истории регулирования для предотвращения зависания браузера», которое продолжается бесконечно.Фактически мне пришлось выключить свой ноутбук, потому что вкладка не закрывалась.К счастью, я сделал снимок экрана устранения неполадок прямо перед тем, как отключить его.

Мой код авторизации, в разделе 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.pp в приложении / 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 { }

Я действительно не могу понять это вообще.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 15 декабря 2018

Проблема в том, что ваш AuthGuard перенаправляет маршрут на / login, и на вашем / login маршруте вы снова получаете AuthGuard, это вызывает бесконечное перенаправление с / login на / login и так далее.Удалите AuthGuard из маршрута / login, все будет хорошо.

...