问道Angular——APP_INITIALIZER

yunhao 发布于2019-08-23 12:54 / 2037人阅读

摘要：概述有时需要在加载应用之前运行代码，有时希望暂停应用初始化，直到完成某些限制之后再执行。令牌可以完成这项操作。是一个函数，在应用改程序初始化时被调用。可以在类的中以的形式来配置。示例在应用启动阶段利用校验登录信息是否有效问道系列

概述

有时需要在加载应用之前运行代码，有时希望暂停应用初始化，直到完成某些限制之后再执行。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 {
    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系列☜☜☜

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99078.html

[译] 监听 Angular 启动过程

摘要：比如下面代码让初始化延迟秒执行当然你可以定义多个回调函数另外一个可以监听程序启动过程的地方就是使用方法这里你可以拿到被启动模块的对象引用，并通过该对象拿到和。原文链接： Hooking into the Angular bootstrap process Angular 提供了一些机制来监听框架初始化过程，本文主要探索如何使用这些机制。 APP_BOOTSTRAP_LISTENER...

cjie 2019-08-22 15:59 评论0 收藏0
我理解的 core 目录

摘要：只需引入一次的什么是项目中只需要引入一次的举个例子，全局错误处理根路由数据预加载请求拦截器等。更漂亮的是为我们提供了拦截器接口，我们只管开发拦截器逻辑功能，调用及使用全部控制权都在框架内。 ... 过了一遍 Angular 文档的小伙伴大致都会记得最佳实践中提到过的有关CoreModule的一些解释和说明，其实关于名字的命名不是强制性的，只要团队中一致 pass，你把它命名为XXXM...

callmewhy 2019-08-23 15:43 评论0 收藏0
问道Angular——Angular刷新当前页面

摘要：默认情况下，路由器将会忽略这次导航。但这样会阻止类似于刷新按钮的特性。使用该选项可以配置导航到当前时的行为。使用配置实际上不会重新加载路由，只是重新出发挂载在路由器上的事件。配置有三个值仅在路由参数更改时触发。 onSameUrlNavigation 从angular5.1起提供onSameUrlNavigation来支持路由重新加载。、有两个值reload和ignore。默...

RyanHoo 2019-08-26 13:24 评论0 收藏0
问道Angular——Angular设置别名alias

摘要：设置别名在根目录下中添加和访问环境变量添加了别名，以便能够从应用程序中的任何位置轻松访问环境变量。它适用于所有指定的环境，因为它会根据传递给命令的标志自动解析正确的环境文件。设置别名在根目录下tsconfig.json中添加baseUrl和paths { compilerOptions: { baseUrl: src, paths: { @app...

Neilyo 2019-08-23 12:54 评论0 收藏0
问道Angular——Angular5/6/7项目添加热更新(HMR)功能

摘要：提供以上热更新功能使用初始化项目命令行进入该目录启动项目将附带功能。提供angular6以上HMR(热更新)功能使用hmr-cli npm i -g hmr-cli 初始化angular项目,命令行进入该目录 hmr init npm run hmr启动项目将附带hmr功能。详细配置如下： Angular6添加HMR environments目录 environme...

Aceyclee 2019-08-23 12:17 评论0 收藏0