1

src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import {IndexComponent} from "./pages/body/index/index.component";
 import {InitGuardService} from "./utils/initGuard.service";
 import {ERROR_ROUTES} from "./pages/error/error.routes";
+import {Error404Component} from "./pages/error/error404/error404.component";
 export const routes: Routes = [
   {path: '', pathMatch: 'full', redirectTo: 'admin/index'},
   {
@@ -55,15 +56,14 @@ export const routes: Routes = [
         loadChildren: () => import('./pages/audit/audit.routes').then(m => m.AUDIT_ROUTES),
         canActivate: [InitGuardService]
       },
+
+      ]
+  },
   {
     path: 'error',
-        children: [
-          {path: '', loadChildren: () => import('./pages/error/error.routes').then(m => m.ERROR_ROUTES)},
-        ]
+    loadChildren: () => import('./pages/error/error.routes').then(m => m.ERROR_ROUTES),
   },
   {
-        // path: '**', component: Error404Component
+    path: '**', component: Error404Component
   },
-      ]
-  }
 ];

src/app/pages/error/error.routes.ts

@@ -1,8 +1,15 @@
 import { Routes } from '@angular/router';
+import {Error403Component} from "./error403/error403.component";
+import {Error404Component} from "./error404/error404.component";
+import {Error500Component} from "./error500/error500.component";
+import {Error401Component} from "./error401/error401.component";
 
 
 
 export const ERROR_ROUTES: Routes = [
 
-
+  { path: '401', component: Error401Component },
+  { path: '403', component: Error403Component },
+  { path: '404', component: Error404Component },
+  { path: '500', component: Error500Component },
 ];

src/app/pages/error/error403/error403.component.html

@@ -1 +1,5 @@
-<p>error403 works!</p>
+<nz-result nzStatus="403" nzTitle="403" nzSubTitle="抱歉，您无权访问此页面。">
+  <div nz-result-extra>
+    <button nz-button nzType="primary" (click)="getHome()">返回首页</button>
+  </div>
+</nz-result>

src/app/pages/error/error403/error403.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Error403Component } from './error403.component';
-
-describe('Error403Component', () => {
-  let component: Error403Component;
-  let fixture: ComponentFixture<Error403Component>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Error403Component]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(Error403Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/error/error403/error403.component.ts

@@ -1,12 +1,29 @@
 import { Component } from '@angular/core';
+import {NzResultModule} from "ng-zorro-antd/result";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+
+import {Router} from "@angular/router";
+
 
 @Component({
   selector: 'app-error403',
   standalone: true,
-  imports: [],
+  imports: [
+    NzResultModule,
+    NzButtonComponent
+  ],
   templateUrl: './error403.component.html',
   styleUrl: './error403.component.less'
 })
 export class Error403Component {
+  constructor(
+
+    private router: Router,  // 路由
+  ) {}
 
+
+  // 退出登录
+  public getHome(): void {
+    this.router.navigateByUrl('/admin/index').then(r => console.log("返回内容" ,r));
+  }
 }

src/app/pages/error/error404/error404.component.html

@@ -1 +1,5 @@
-<p>error404 works!</p>
+<nz-result nzStatus="404" nzTitle="404" nzSubTitle="很抱歉，您访问的页面不存在。">
+  <div nz-result-extra>
+    <button nz-button nzType="primary" (click)="getHome()">返回首页</button>
+  </div>
+</nz-result>

src/app/pages/error/error404/error404.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Error404Component } from './error404.component';
-
-describe('Error404Component', () => {
-  let component: Error404Component;
-  let fixture: ComponentFixture<Error404Component>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Error404Component]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(Error404Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/error/error404/error404.component.ts

@@ -1,12 +1,27 @@
 import { Component } from '@angular/core';
+import {Router} from "@angular/router";
+import {NzResultModule} from "ng-zorro-antd/result";
+import {NzButtonComponent} from "ng-zorro-antd/button";
 
 @Component({
   selector: 'app-error404',
   standalone: true,
-  imports: [],
+  imports: [
+    NzResultModule,
+    NzButtonComponent
+  ],
   templateUrl: './error404.component.html',
   styleUrl: './error404.component.less'
 })
 export class Error404Component {
+  constructor(
 
+    private router: Router,  // 路由
+  ) {}
+
+
+  // 退出登录
+  public getHome(): void {
+    this.router.navigateByUrl('/admin/index').then(r => console.log("返回内容" ,r));
+  }
 }

src/app/pages/error/error500/error500.component.html

@@ -1 +1,5 @@
-<p>error500 works!</p>
+<nz-result nzStatus="500" nzTitle="500" nzSubTitle="很抱歉，服务器上出现错误。">
+  <div nz-result-extra>
+    <button nz-button nzType="primary" (click)="getHome()">返回首页</button>
+  </div>
+</nz-result>

src/app/pages/error/error500/error500.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Error500Component } from './error500.component';
-
-describe('Error500Component', () => {
-  let component: Error500Component;
-  let fixture: ComponentFixture<Error500Component>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Error500Component]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(Error500Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/error/error500/error500.component.ts

@@ -1,12 +1,27 @@
 import { Component } from '@angular/core';
+import {NzResultModule} from "ng-zorro-antd/result";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-error500',
   standalone: true,
-  imports: [],
+  imports: [
+    NzResultModule,
+    NzButtonComponent
+  ],
   templateUrl: './error500.component.html',
   styleUrl: './error500.component.less'
 })
 export class Error500Component {
+  constructor(
 
+    private router: Router,  // 路由
+  ) {}
+
+
+  // 退出登录
+  public getHome(): void {
+    this.router.navigateByUrl('/admin/index').then(r => console.log("返回内容" ,r));
+  }
 }

src/app/utils/Interceptor.service.ts

@@ -5,15 +5,15 @@ import {
 import {catchError, finalize} from 'rxjs/operators';
 import {mergeMap} from 'rxjs/operators';
 import {Observable} from 'rxjs';
-import {NzMessageService} from "ng-zorro-antd/message";
 import {USER_TOKEN} from "../data/login/localStorage.namespace";
 import {BrowserStorageService} from "./localStorage.service";
+import {Router} from "@angular/router";
 
 
 @Injectable()
 export class InterceptorService implements HttpInterceptor {
   constructor(
-    private message: NzMessageService,
+    private router: Router,  // 路由
     private storage: BrowserStorageService,
   ) {
   }
@@ -69,8 +69,20 @@ export class InterceptorService implements HttpInterceptor {
   }
 
   jumpError(message: string , status: number) {
-    console.log("status" , status);
-    // this.router.navigateByUrl('/error/500');
+    if (status == 401) {
+      this.router.navigateByUrl('/error/401').then(r => console.log("返回内容" ,r));
+
+    }
+    if (status == 403) {
+      this.router.navigateByUrl('/error/403').then(r => console.log("返回内容" ,r));
+    }
+    if (status == 404) {
+      this.router.navigateByUrl('/error/404').then(r => console.log("返回内容" ,r));
+    }
+    if (status == 500) {
+      this.router.navigateByUrl('/error/500').then(r => console.log("返回内容" ,r));
+    }
+
 
   }
 }