Question

我正在使用angular cli开发一个带有多个延迟加载模块的角度应用程序。资源（js，css和html）需要由cookie设置的授权。如果用户在加载第一页时未登录，则会将其重定向到SSO登录页面，然后在成功授权后返回应用程序。这个流程不是我可以改变的。

我遇到的问题是，如果用户加载一个模块，在该模块中工作一段时间，然后使页面保持打开状态，但在白天不能使用它。如果用户然后第二天开始尝试加载需要另一个惰性模块的路由，则该模块将返回401，因为他不再进行身份验证。但是，用户不会看到模块无法加载并且感觉没有任何反应。

我正在寻找一种在无法加载延迟加载模块时获得通知的方法，因此我可以将用户重定向到登录页面。这可能吗？

Answer 1

通过使用预加载延迟加载模块的PreloadingStrategy，可以防止这种情况，因为当用户不再进行身份验证时，应用程序不再需要在路由更改时获取特定模块。

preload-strategy.ts（取自John Papa repo link）

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); 

  }
}

角度延迟加载模块401

1 个答案: