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

Question

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

import * as firebase from 'firebase/app';
import { Storage } from '@ionic/storage';


@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {


  constructor(public storage: Storage) {}

    loginUser(value){
     firebase.auth().signInWithEmailAndPassword(value.email, value.password)
      .then(() => {
        console.log('Log In Successful, UID: ' + value.uid + 'Email: ' + 
       value.email);
         this.storage.set('Email', value.email);
         this.storage.set('Password', value.password);
      })
      }
    }

Answer 1

Ref.URL-адрес моего github

authentication.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { ToastController, Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  authState = new BehaviorSubject(false);

  constructor(
    private router: Router,
    private storage: Storage,
    private platform: Platform,
    public toastController: ToastController
  ) {
    this.platform.ready().then(() => {
      this.ifLoggedIn();
    });
  }


  ifLoggedIn() {
    this.storage.get('USER_INFO').then((response) => {
      if (response) {
        this.authState.next(true);
      }
    });
  }


  login() {
    var dummy_response = {
      user_id: 'manzoor.alam@thinktac.com',
      user_name: 'manzoor'
    };
    this.storage.set('USER_INFO', dummy_response).then((response) => {
      this.router.navigate(['dashboard']);
      this.authState.next(true);
    });
  }

  logout() {
    this.storage.remove('USER_INFO').then(() => {
      this.router.navigate(['login']);
      this.authState.next(false);
    });
  }

  isAuthenticated() {
    return this.authState.value;
  }
}

В файле auth-guard.service.ts

import { Injectable } from '@angular/core';
import { AuthenticationService } from './authentication.service';
import { CanActivate } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor( public authenticationService: AuthenticationService) { }

  canActivate(): boolean {
    return this.authenticationService.isAuthenticated();
  }
}

файл App.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AuthenticationService } from './services/Authentication.service';
import { Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router: Router,

    private authenticationService: AuthenticationService

  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.authenticationService.authState.subscribe(state => {
        if (state) {
          this.router.navigate(['dashboard']);
        } else {
          this.router.navigate(['login']);
        }
      });

    });

  }
}

В app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './services/auth-guard.service';


const routes: Routes = [
  // { path: '', redirectTo: 'home', pathMatch: 'full' },
  // { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  // { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  // { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardPageModule' },

  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  {
    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardPageModule',
    canActivate: [AuthGuardService]
    // Here canActivate is a method inside the AuthGuardService which return boolen type values
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Пожалуйста, исх.URL моего github подробнее URL github

Answer 2

Используйте Router Guard.

Guard - это просто служба Angular - или инъекционная - которая контролирует поведение маршрутизатора в удобной для обслуживания форме.Давайте сгенерируем его с помощью CLI:

ionic generate guard guards/login

. Guard содержит специальный метод canActivate, который мы должны реализовать, который должен возвращать или разрешать логическое значение.Поскольку Ionic Storage основан на Promise, мы можем просто сделать его асинхронной функцией.Его задача - прочитать значение loginComplete из хранилища устройства.Если true, он разрешает активировать маршрут, но если false, он блокирует маршрут и перенаправляет на логин.

// ...omitted
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate {

  constructor(private storage: Storage, private router: Router) {}

  async canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {

    const isComplete = await this.storage.get('loginComplete');

    if (!isComplete) {
      this.router.navigateByUrl('/login');
    }

    return isComplete;
  }
}

Применение охраны

app-routing.module

import { Routes, RouterModule } from '@angular/router';
import { LoginGuard } from './guards/login.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: './tabs/tabs.module#TabsPageModule',
    canActivate: [LoginGuard] // <-- apply here 
  },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginPageModule'
  }
];
@NgModule(...)
export class AppRoutingModule {}

Страница входа

import * as firebase from 'firebase/app';
import { Storage } from '@ionic/storage';


@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {


  constructor(public storage: Storage) {}

    loginUser(value){
     firebase.auth().signInWithEmailAndPassword(value.email, value.password)
      .then(() => {
        console.log('Log In Successful, UID: ' + value.uid + 'Email: ' + 
       value.email);
         this.storage.set('Email', value.email);
         this.storage.set('Password', value.password);
           this.storage.set('loginComplete', true);
      })
      }
    }

Надеюсь, это поможет вам:)

Ссылка URL: AngularFirebase