Как автоматически обнаружить пользователей, которые вошли в систему, и направить их на страницу панели инструментов без повторного входа в Ionic 4 и Firebase

Question

У меня есть проект на Ionic 4 и Firebase.Я не хочу, чтобы пользователи обычно входили в систему каждый раз, когда они используют приложение.Это должны быть автоматические логины.Что я должен сделать, чтобы достичь этого?

Вот мой код страницы входа.login.page.html

<ion-content padding>
 <div class="ion-text-center">
   <h2>Login</h2>
 </div>
 <ion-item>
   <ion-label position="floating">Email</ion-label>
   <ion-input type="text" [(ngModel)]="email"></ion-input>
 </ion-item>

 <ion-item>
   <ion-label position="floating">Password</ion-label>
   <ion-input type="password" [(ngModel)]="password"></ion-input>
 </ion-item>

 <ion-button color="danger" expand="block" (click)="loginUser()">Login</ion-button>
 <ion-button color="primary" expand="block" (click)="gotoRegister()">Register</ion-button>
</ion-content>

login.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  email: string = ""
  password: string =""
  constructor(private router: Router, public afauth: AngularFireAuth) { }

  ngOnInit() {
  }

  async loginUser(){
    const {email, password} = this
    try {
      const res = this.afauth.auth.signInWithEmailAndPassword(email, password);
    } catch(err){
      console.dir(err)
      if(err.code === "auth/user-not-found"){
        console.log("User not found")
      }
    }


  }

  gotoRegister(){
    this.router.navigate(['/register']);
  }
}

Answer 1

Вы можете реализовать с помощью новой функции ionic 4 Guards Как показано ниже После успешного входа в систему установите статус this.storage.set('seen-intro', true);

и ниже, изменения кода в файле защиты

async canActivate(next: ActivatedRouteSnapshot, state:RouterStateSnapshot): Promise<boolean> {
      let introSeen = await this.storage.get('seen-intro');

      if (!introSeen) {
        this.router.navigateByUrl('/intro');
      }
      return introSeen;
}

дополнительная информация приведена ниже подробнее

Answer 2

У меня есть другое решение для этого. Единственная проблема заключается в том, что возвращающиеся пользователи не сразу перенаправляются на панель инструментов. Требуется до 10 секунд, прежде чем он перенаправляет их. Как я могу сделать это намного эффективнее?

Я использовал это на моей самой первой странице.ts

constructor(private router: Router, public afauth: AngularFireAuth) { 
    this.afauth.authState.subscribe((user: firebase.User) => {
      if (!user) {
        this.router.navigate(['/login']);
      }else
      {
        this.router.navigate(['/home']);
      }
      return;
    });
  }