angular - 选项卡之间的firebase身份验证持久性问题

Question

我正在使用 angular 和 ionic 开发一个应用程序，并且最近在该应用程序上获得了 firebase 身份验证。我遇到的问题是，当用户导航到“个人资料”选项卡并在该选项卡上登录他们的帐户时，他们会被重定向到个人资料页面，现在的问题是当我点击离开该选项卡然后返回他们现在的个人资料页面时再次提示登录页面。我不确定如何解决此问题我不知道用户是否正在注销，或者用户是否仍在登录，现在除非再次登录，否则无法访问他们的个人资料页面。这是该问题的简短演示https://youtu.be/4RQjesHBwvI

这是我的 tab3.page.ts（登录页面）

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { LoadingController, ToastController } from '@ionic/angular';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  email: string = '';
  password: string = '';
  error: string = '';
  constructor(private fireauth: AngularFireAuth,
    private router: Router,
    private toastController: ToastController,
    public loadingController: LoadingController,
    public alertController: AlertController) {

  }


  async openLoader() {
    const loading = await this.loadingController.create({
      message: 'Please Wait ...',
      duration: 2000
    });
    await loading.present();
  }
  async closeLoading() {
    return await this.loadingController.dismiss();
  }

  login() {
    this.fireauth.auth.signInWithEmailAndPassword(this.email, this.password)
      .then(res => {
        if (res.user) {
          console.log(res.user);
          this.router.navigate(['/tabs/home']);
        }
      })
      .catch(err => {
        console.log(`login failed ${err}`);
        this.error = err.message;
      });
  }

  async presentToast(message, show_button, position, duration) {
    const toast = await this.toastController.create({
      message: message,
      showCloseButton: show_button,
      position: position,
      duration: duration
    });
    toast.present();
  }

}

这是tab3.page.html（登录页面）

<ion-content no-padding>
  <div class="main">
    <ion-card no-margin>
      <ion-card-content>
        <ion-row class="row">
          <div class="fire-logo">
            <img src="assets/firebase.png" class="img-logo">
            <ion-text>
              <h2 no-margin margin-vertical text-center>Welcome! Log in here</h2>
            </ion-text>
          </div>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-input clearInput type="email" placeholder="Email" [(ngModel)]="email" class="input" padding-horizontal
              clear-input="true"></ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-input clearInput type="password" placeholder="Password" [(ngModel)]="password" class="input"
              padding-horizontal clear-input="true"></ion-input>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-button expand="block" (click)="login()" color="undefined" class="transition">
              <strong class="white">
                Login</strong></ion-button>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-text class="error" text-center>{{error}}</ion-text>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-text text-center class="block">Don't have an account yet ?
              <span class="bold" routerLink="/tabs/register">Sign up here</span></ion-text>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-text text-center class="block bold" routerLink="/tabs/forgot">Forgot Password</ion-text>
          </ion-col>
        </ion-row>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

这是 home.page.ts（个人资料页面）

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';
import { LoadingController, ToastController } from '@ionic/angular';


@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
}) 
export class HomePage{

  user: any;
  email: string = '';
  password: string = '';
  username: string = '';
  image: number;
  phone: number;
  error: string;
  userWantsToSignup: boolean = false;
  linkError: string = '';
  constructor(private toastController: ToastController, public loadingController: LoadingController, private fireauth: AngularFireAuth, private router: Router) { }


  ionViewDidEnter() {
    this.fireauth.auth.onAuthStateChanged((user) => {
      if (user) {
        this.user = user;
        console.log(this.user);
      }
    })
  }

  updateEmail() {
    this.user.updateEmail(this.email)
      .then(() => {
        this.email = '';
        this.presentToast('Email updated', false, 'bottom', 1000);
        this.error = '';
      })
      .catch(err => {
        console.log(` failed ${err}`);
        this.error = err.message;
      });
  }

  updateUsername() {
    this.user.updateProfile({
      displayName: this.username
    })
      .then((data) => {
        console.log(data);
        this.username = '';
        this.presentToast('Username updated', false, 'bottom', 1000);
        this.error = '';
      })
      .catch(err => {
        console.log(` failed ${err}`);
        this.error = err.message;
      });
  }

  updateImage() {

    this.user.updateProfile({
      photoURL: `https://picsum.photos/id/${this.image}/200/200`
    })
      .then((data) => {
        console.log(data);
        this.image = null;
        this.presentToast('Image updated', false, 'bottom', 1000);
        this.error = '';
      })
      .catch(err => {
        console.log(` failed ${err}`);
        this.error = err.message;
      });
  }

  updatePassword() {
    this.user.updatePassword(this.password)
      .then(() => {
        this.password = '';
        this.presentToast('Password updated', false, 'bottom', 1000);
        this.error = '';
      })
      .catch(err => {
        console.log(` failed ${err}`);
        this.error = err.message;
      });
  }

  logout() {
    this.fireauth.auth.signOut().then(() => {
      this.router.navigate(['/tabs/tab3']);
    })
  }

  async presentToast(message, show_button, position, duration) {
    const toast = await this.toastController.create({
      message: message,
      showCloseButton: show_button,
      position: position,
      duration: duration
    });
    toast.present();
  }
}

这是 home.page.html（个人资料页面）

<ion-header>
  <ion-toolbar color="dark">

  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    Welcome user
    <p>Here are your profile details</p>

    <ion-item *ngIf="user">
      <ion-thumbnail slot="start">
        <img [src]="user.photoURL">
      </ion-thumbnail>
      <ion-label text-wrap>
        <ion-text color="primary">
          <h3>{{user.displayName}}</h3>
        </ion-text>
        <p>{{user.email}}</p>
      </ion-label>
    </ion-item>
  </div>
  <ion-list-header color="medium">
    Update Profile
  </ion-list-header>
  <ion-item>
    <ion-label position="fixed">Username</ion-label>
    <ion-input type="string" placeholder="Enter new" [(ngModel)]="username"></ion-input>
    <ion-button slot="end" color="success" expand="full" (click)="updateUsername()">Update</ion-button>
  </ion-item>
  <ion-item>
    <ion-label position="fixed">Image</ion-label>
    <ion-input type="number" placeholder="A number 1-1000" [(ngModel)]="image"></ion-input>
    <ion-button slot="end" color="success" expand="full" (click)="updateImage()">Update</ion-button>
  </ion-item>
  <ion-list-header color="medium">
    Sensitive Updates
  </ion-list-header>
  <ion-item>
    <ion-label position="fixed">Email</ion-label>
    <ion-input type="string" placeholder="Enter new" [(ngModel)]="email"></ion-input>
    <ion-button slot="end" color="success" expand="full" (click)="updateEmail()">Update</ion-button>
  </ion-item>
  <ion-item>
    <ion-label position="fixed">Password</ion-label>
    <ion-input type="string" placeholder="Enter new" [(ngModel)]="password"></ion-input>
    <ion-button slot="end" color="success" expand="full" (click)="updatePassword()">Update</ion-button>
  </ion-item>
  <ion-row>
    <ion-col>
      <ion-text class="error" text-center>{{error}}</ion-text>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col>
      <ion-text class="error" text-center>{{linkError}}</ion-text>
    </ion-col>
  </ion-row>
</ion-content>
<ion-footer class="transition">
  <ion-toolbar color="undefined" (click)="logout()">
    <ion-title>
      Logout
    </ion-title>
  </ion-toolbar>
</ion-footer>

我不确定问题出在此页面上还是我需要在其他地方进行的重定向。

标签： angularfirebaseionic-frameworkfirebase-authentication