問道Angular——APP_INITIALIZER

概述

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

示例

  在應用啓動階段利用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<any> {
    return new Promise<any>((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<boolean> {
    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系列☜☜☜

---