Angular Juniper SSL VPN 中的 Web 应用程序路由

Question

目前我正在开发一个简单的网络应用程序，使用 AngularJS。在开发过程中，我在应用程序由 IIS 在本地提供服务时对其进行了测试。但是，当我将它部署在公司 Web 服务器上并运行它在 Juniper SSL VPN 中时，麻烦就开始了。

首先我必须应用以下 'fix'： AngularJS Routing Fails when running within a Juniper SSL VPN #8905

但是上面的修复只解决了部分问题。仍然存在的问题是 AngularJS returns 当我尝试加载默认 ('/') 视图以外的视图时出现以下错误 ($location.path('/anotherView')视图控制器，我收到以下错误消息：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.15/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (,DanaInfo=server1.mydomain.nl,CT=js+angular.js:63)
    at Scope.$get.Scope.$digest (,DanaInfo=server1.mydomain.nl,CT=js+angular.js:14340)
    at Scope.$get.Scope.$apply (,DanaInfo=server1.mydomain.nl,CT=js+angular.js:14565)
    at done (,DanaInfo=server1.mydomain.nl,CT=js+angular.js:9685)
    at completeRequest (,DanaInfo=server1.mydomain.nl,CT=js+angular.js:9875)
    at XMLHttpRequest.requestLoaded (,DanaInfo=server1.mydomain.nl,CT=js+angular.js:9816)(anonymous function) @ ,DanaInfo=server1.mydomain.nl,CT=js+angular.js:11649$get @ ,DanaInfo=server1.mydomain.nl,CT=js+angular.js:8583$get.Scope.$apply @ ,DanaInfo=server1.mydomain.nl,CT=js+angular.js:14567done @ ,DanaInfo=server1.mydomain.nl,CT=js+angular.js:9685completeRequest @ ,DanaInfo=server1.mydomain.nl,CT=js+angular.js:9875requestLoaded @ ,DanaInfo=server1.mydomain.nl,CT=js+angular.js:9816

我已经使用默认的 AngularJS 路由和 Angular ui.router 机制对其进行了测试，两者都给出了相同的结果。

非常感谢任何解决此问题的帮助！

Answer 1

问题已通过将 Juniper 配置为反向代理来解决。

Answer 2

我们通过修补核心 Angular.js 代码库中的 parseAppUrl 函数解决了这个问题，如下所示：

function parseAppUrl(relativeUrl, locationObj, appBase) {
  var prefixed = (relativeUrl.charAt(0) !== '/');
  if (prefixed) {
    relativeUrl = '/' + relativeUrl;
  }
  var match = urlResolve(relativeUrl, appBase);
  locationObj.$$path = decodeURIComponent(prefixed && match.pathname.charAt(0) === '/' ?
      match.pathname.substring(1) : match.pathname);
  locationObj.$$search = parseKeyValue(match.search);
  locationObj.$$hash = decodeURIComponent(match.hash);

  //Detect Juniper re-write functions and handle the $$path issue
  if(locationObj.$$path === "[object Object]" && typeof(DanaOrigUrl) === 'function') {
    var __strH = 'href';
    var __tmpHack = match[__strH];
    var __nn = ("" + __tmpHack).match(/^(https?:\/\/[^\/]+)?([^?|#]*)/);
    locationObj.$$path = __nn[2];
  }
  // make sure path starts with '/';
  if (locationObj.$$path && locationObj.$$path.charAt(0) != '/') {
    locationObj.$$path = '/' + locationObj.$$path;
  }
}

参考：https://github.com/angular/angular.js/issues/8905

Answer 3

就我而言，我在重写 URL 时遇到了问题。网关在使用标准 HTML href 属性时做得很好，但对于 Angular AJAX 调用则不然。所以我写了一个拦截器来解决这个问题：

Angular 2 (JavaScript)

app.config( function( $httpProvider ) {
  $httpProvider.interceptors.push( function( $q, $rootScope ) {
    return {
      'request': function( config ) {
        // Convert request URL for Juniper Secure Web Access
        if ( typeof DanaUrl === "function" && !config.url.includes( '.html' ) ) {
          config.url = DanaUrl( config.url );
        }
        return config;
      }
    };
  } );
} );

Angular 5+ (TypeScript)

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http';

declare function DanaUrl(url: string): string;

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
constructor(
) { }

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

    // Rewrite Juniper SWA URLs
    if ( typeof DanaUrl === "function" && !request.url.includes( '.html' ) ) {
        request = request.clone({
            url: DanaUrl( request.url )
        });
    }

    return next.handle(request).do((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
            // do stuff with response if needed
        }
    }, (err: HttpErrorResponse) => {

    }).finally(() => {

    });
}

}

如果 Juniper 的 DanaURL 功能可用且 URL 不包含“.html”，则 URL 将被重写。这是因为 Angular 使用 URLs 将视图包含到模板中，即使它们被包含在内（例如在脚本标签中）。（我不喜欢这部分，但现在它正在工作......）

希望对大家有所帮助...

Angular Juniper SSL VPN 中的 Web 应用程序路由

Angular web app routing within Juniper SSL VPN

javascript

ssl

angularjs

ngroute

juniper-network-connect