問道Angular——APP_INITIALIZER

yunhao 發(fā)布于2019-08-23 12:54 / 2059人閱讀

摘要：概述有時需要在加載應(yīng)用之前運行代碼，有時希望暫停應(yīng)用初始化，直到完成某些限制之后再執(zhí)行。令牌可以完成這項操作。是一個函數(shù)，在應(yīng)用改程序初始化時被調(diào)用。可以在類的中以的形式來配置。示例在應(yīng)用啟動階段利用校驗登錄信息是否有效問道系列

概述

??有時需要在加載應(yīng)用之前運行代碼，有時希望暫停應(yīng)用初始化，直到完成某些限制之后再執(zhí)行。APP_INITIALIZER令牌可以完成這項操作。
??APP_INITIALIZER是一個函數(shù)，在應(yīng)用改程序初始化時被調(diào)用。可以在AppModule類的providers中以factory的形式來配置。適合加載簡單的數(shù)據(jù)或簡單的校驗。
??factory是一個返回值為promise的函數(shù)。

示例

??在應(yīng)用啟動階段利用jwt校驗登錄信息是否有效
load.service.ts

import {Injectable, Injector} from "@angular/core";
import {JwtHelperService} from "@auth0/angular-jwt";
import {Observable, of} from "rxjs";
import {Router} from "@angular/router";

@Injectable({
  providedIn: "root"
})
export class LoadService {

  constructor(private jwtHelper: JwtHelperService,
              private injector: Injector) {
  }

  load(): Promise {
    return new Promise((resolve, reject) => {
      return this.checkUser()
        .subscribe(res => {
          if (res) {
            setInterval(() => {
              this.checkStatus();
            }, 1000 * 300);
          } else {
            this.goLogin();
          }
          resolve(res);
        }, err => {
          reject(err);
        });
    });
  }

  isTokenExpired(token: string = "access_token") {
    const jwtStr = localStorage.getItem(token);
    return jwtStr ? this.jwtHelper.isTokenExpired(jwtStr) : true;
  }

  checkUser(token: string = "access_token"): Observable {
    if (!this.isTokenExpired()) {
      return of(true);
    } else {
      localStorage.removeItem(token);
      return of(false);
    }
  }

  checkStatus() {
    if (this.isTokenExpired()) {
      this.goLogin();
    }
  }

  goLogin() {
    const router = this.injector.get(Router);
    router.navigate(["/user/login"]);
  }

}

app.module.ts

export function loadFactory(loadService: LoadService): Function {
  return () => loadService.load();
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadFactory,
      deps: [LoadService, Injector],
      multi: true
    }
  ]
})

???問道Angular系列???