Проблема с сохранением аутентификации Firebase между вкладками - PullRequest
Новая
       49

Проблема с сохранением аутентификации Firebase между вкладками

0 голосов
/ 03 апреля 2020

Я работаю над приложением, использующим angular и ioni c, и недавно получил проверку подлинности 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();
  }

}

Вот вкладка3. 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();
  }
}

Вот домашняя страница. 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>

Я не уверен, в чем проблема, если она находится на этой странице или перенаправление мне нужно сделать где-то еще.

...