角度延迟加载模块401答案

【问题标题】：Angular lazy loaded module 401角度延迟加载模块401
【发布时间】：2017-10-25 06:33:09
【问题描述】：

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

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

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

【问题讨论】：

重定向是用Guards完成的吗？在这种情况下，我认为您可以在身份验证失败的情况下触发一些事件并在 AppComponent 中处理以显示某些内容。
不，当您加载 index.html 文件时，重定向是在服务器端完成的。如果我在 XHR 请求中得到 401，我会在代码中进行重定向，但不知道如何在静态资源上拦截 401
这方面有什么进展吗？我陷入了完全相同的情况。
我通过自定义错误处理程序来“解决”这个问题，该处理程序可以捕获所有错误。如果一个惰性模块加载失败，它会抛出一个异常，错误处理程序可以对其进行操作并将用户重定向到登录页面。

标签： angular angular-cli

【解决方案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 并检查模块的抛出错误加载。

错误处理程序.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); 

  }
}

【讨论】：