角延遲加載模塊401

Question

我正在使用angular cli開發具有多個延遲加載模塊的angular應用程序。 資源（js，css和html）需要由cookie設置的授權。 如果用戶在加載第一頁時未登錄，則將其重定向到SSO登錄頁面，然后在成功授權后返回到應用程序。 我無法改變這種流程。

我的問題是，如果用戶加載一個模塊，則在該模塊中工作了一段時間，然后使頁面處於打開狀態，但白天卻無法再使用它。 如果用戶隨后第二天開始嘗試加載需要另一個惰性模塊的路由，則該模塊將返回401，因為他已不再通過身份驗證。 但是，用戶將看不到模塊加載失敗，感覺沒有任何反應。

我正在尋找一種方法，以便在無法加載延遲加載的模塊時得到通知，以便可以將用戶重定向到登錄頁面。 這可能嗎？

Answer 1

通過使用PreloadingStrategy加載延遲加載模塊的PreloadingStrategy，可以防止這種情況，因為當用戶不再通過身份驗證時，應用程序不再需要在路由更改時獲取特定模塊。

preload-strategy.ts（摘自John Papa repo鏈接 ）

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

export class PreloadSelectedModulesList implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data['preload'] ? load() : of(null);
  }
}

APP-routing.module.ts

import { PreloadSelectedModulesList } from './core/preload-strategy';
    const routes: Routes = [
        // Eagerly loaded
        { path: '', component: HomeComponent, pathMatch: 'full' },
        // Preloaded module
        { path: 'preloaded', loadChildren: './preloaded/preloaded.module#PreloadModule', data: {preload: true}},
        // Lazy loaded module
        { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'}
    ];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            preloadingStrategy: PreloadSelectedModulesList
        })
    ],
    exports: [RouterModule],
    providers: [ PreloadSelectedModulesList, ..., ... ]
})

export class AppRoutingModule { }

仍然存在一個很小的極端情況，即用戶在嘗試獲取模塊時突然變得未經授權，在這種情況下，可能是Abris上面提到的一種解決方法，擴展了Angulars ErrorHandler並檢查拋出的錯誤以加載模塊。

錯誤handler.ts

import { ErrorHandler } from '@angular/core';

export default class MyErrorHandler extends ErrorHandler {

 constructor() { 
   super();
 }

  handleError(error) {
      // Check and take appropriate actions
      ...
      // delegate to the default handler
      super.handleError(error); 

  }
}