1

我有一个 Angular 6 应用程序，它使用 OAM 身份验证 cookie 与后端 Web 服务进行通信。OAM 会话设置为在 X 分钟后或同一用户从另一台设备登录时过期。我想处理这个并向用户显示一个弹出窗口，以便他们可以单击并导航到登录页面。我创建了一个 HttpInterceptor 并调用了一个服务来显示弹出窗口。

当我部署应用程序（使用ng build和生产模式配置构建它）时，只要会话过期并且下一个用户操作是导航到没有在路由模块中定义的路由解析器的路径，它就可以正常工作，即在其中调用服务初始化后的组件。每当我尝试导航到需要首先调用解析器的路径时，什么都不会发生。我尝试添加控制台日志并重新部署了几次以查看可能出现的问题，但解析器和拦截器甚至都没有被调用。我只是在控制台选项卡中收到以下错误并且没有导航发生：

Uncaught SyntaxError: Unexpected token < at https://login...?bmctx=920634F2F55...e9b2.js

Error: Loading chunk 21 failed...

据我了解，第一个错误是因为它试图解析请求的响应（来自 OAM 的自动重定向到登录页面）并且<字符是<!DOCTYPE html>. 顺便说一句，这是返回错误代码 200 的相同响应，我在拦截器中检查以显示弹出窗口。

ng serve奇怪的是，当我以调试模式（使用命令）运行应用程序时，这不会发生。在所有情况下都正确调用了拦截器！它可能与我的构建配置有关，还是我错过了与 OAM 超时处理相关的东西？

请参阅下面我的代码的一些部分：

@Injectable()
export class ResponseInterceptor implements HttpInterceptor {
  constructor(private alertMessageService: AlertMessagesService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(req).pipe(catchError((error: any, caught: Observable<HttpEvent<any>>) => {

      if ((error.status === 200 || error.status === 0) && error.url.indexOf('login.') !== -1) {
        this.alertMessageService.displayLogoutConfirmation();
        return of(error);
      }

      throw error;
    }));
  }
}

angular.json 中的部署构建配置：

"configurations": {
    "dev1": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/./environments/environment.ts",
          "with": "src/./environments/environment.prodpro.ts"
        }
      ]
    },
4

0 回答 0