项目初始化

src/app/routes/exception/403.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'exception-403',
+  template: ` <exception type="403" style="min-height: 500px; height: 80%;"></exception> `
+})
+export class Exception403Component {}

src/app/routes/exception/404.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'exception-404',
+  template: ` <exception type="404" style="min-height: 500px; height: 80%;"></exception> `
+})
+export class Exception404Component {}

src/app/routes/exception/500.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'exception-500',
+  template: ` <exception type="500" style="min-height: 500px; height: 80%;"></exception> `
+})
+export class Exception500Component {}

src/app/routes/exception/exception-routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { Exception403Component } from './403.component';
+import { Exception404Component } from './404.component';
+import { Exception500Component } from './500.component';
+import { ExceptionTriggerComponent } from './trigger.component';
+
+const routes: Routes = [
+  { path: '403', component: Exception403Component },
+  { path: '404', component: Exception404Component },
+  { path: '500', component: Exception500Component },
+  { path: 'trigger', component: ExceptionTriggerComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ExceptionRoutingModule {}

src/app/routes/exception/exception.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ExceptionModule as DelonExceptionModule } from '@delon/abc/exception';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCardModule } from 'ng-zorro-antd/card';
+
+import { Exception403Component } from './403.component';
+import { Exception404Component } from './404.component';
+import { Exception500Component } from './500.component';
+import { ExceptionRoutingModule } from './exception-routing.module';
+import { ExceptionTriggerComponent } from './trigger.component';
+
+const COMPONENTS = [Exception403Component, Exception404Component, Exception500Component, ExceptionTriggerComponent];
+
+@NgModule({
+  imports: [CommonModule, DelonExceptionModule, NzButtonModule, NzCardModule, ExceptionRoutingModule],
+  declarations: [...COMPONENTS]
+})
+export class ExceptionModule {}

src/app/routes/exception/trigger.component.ts

@@ -0,0 +1,35 @@
+import { Component, Inject } from '@angular/core';
+import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+import { _HttpClient } from '@delon/theme';
+
+@Component({
+  selector: 'exception-trigger',
+  template: `
+    <div class="pt-lg">
+      <nz-card>
+        <button *ngFor="let t of types" (click)="go(t)" nz-button nzDanger>触发{{ t }}</button>
+        <button nz-button nzType="link" (click)="refresh()">触发刷新Token</button>
+      </nz-card>
+    </div>
+  `
+})
+export class ExceptionTriggerComponent {
+  types = [401, 403, 404, 500];
+
+  constructor(private http: _HttpClient, @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {}
+
+  go(type: number): void {
+    this.http.get(`/api/${type}`).subscribe();
+  }
+
+  refresh(): void {
+    this.tokenService.set({ token: 'invalid-token' });
+    // 必须提供一个后端地址，无法通过 Mock 来模拟
+    this.http.post(`https://localhost:5001/auth`).subscribe(
+      res => console.warn('成功', res),
+      err => {
+        console.log('最后结果失败', err);
+      }
+    );
+  }
+}