如何处理路由中的额外哈希?(AngularJS 1.5 + new/component router)



我们正在尝试使用带有新组件路由器位的 Angular 1.5 构建应用程序。我们遇到了一些边缘情况,我们想知道是否有任何解决方法。

主要参与者

  • IdentityServer v2:我们的客户目前将其用于OAuth。它导致了此问题的一部分。这是遗留问题,我们无法控制它的使用。
  • AngularJS 1.5 作为我们的前端框架。
  • 新的角度路由器,现在我相信了,叫做ngComponentRouter?我们认为这种风格可以帮助我们在 Angular v1.5 和 Angular v2 之间架起桥梁,而且移植起来很容易。
  • oauth-ng 作为我们的 OAuth 隐式流的包装器。
  • 较旧的浏览器:从某种意义上说,我们必须支持IE9+,这意味着我们不能使用Angular的HTML5模式。

目标

我们希望采用诸如 http://mysite/#!/auth/#auth_token=xyz123 的 URL(不受我们控制的结构,例如无法删除第二个哈希)和:

  • 将其放入实际的身份验证控制器中
  • 通过
  • 参数或直接通过$location提供auth_token值。(目前在到达控制器之前会对其进行清理)。

背景/问题

我们的客户有一个中央登录系统,他们正在使用IdentityServer v2。据我了解,当我们从 IdSrv v2 请求令牌时,它会通过将#auth_token=xyz123附加到您的重定向 URL 来响应。当它认为你会my.com/login.html时,它被写回来了,从而导致login.html#auth_token=xyz123

但是,对于已经使用哈希的 Angular 应用程序,这成为一个问题,因为 URL 最终会沿着 mysite.com/#/auth#auth_token=xyz123 .

正如你所料,这让 Angular 很生气。我们还没有能够找到一种方法来让它在组件路由器下工作。

它如何与旧路由器配合使用

根据 oauth-ng 文档,如果我们使用未启用 html5 的旧路由器,我们会执行以下操作:

angular.module('app').config(function ($routeProvider) {
  $routeProvider
    .when('/access_token=:accessToken', {
      template: '',
      controller: function ($location, AccessToken) {
        var hash = $location.path().substr(1);
        AccessToken.setTokenFromString(hash);
        $location.path('/');
        $location.replace();
      }
    })

我们尝试过什么

  • 以类似的方式定义组件路由。这不起作用,因为/access_token=:accessToken包含一个=,组件路由器似乎不允许这样做。
  • 看看我们是否可以让 IdentityServer v2 更改响应的格式。这似乎是不可能的;响应似乎被硬编码为[URL we define]#auth_token=xyz123.
  • 使用其他哈希等伪造 URL。通常以不良/不一致的行为告终。

我们认为我们的选择是什么

  • 使用全部捕获/未找到控制器。如果我们让路由一直下降到/**,我们可以从$location中检索令牌值。不过这有点恶心;我们想避免它。
  • 找到一种方法将完整的 URL 获取到控制器中。我们可以捕获路由并将其传递到控制器,但此时 URL 不可用。
  • 回到使用较旧的路由器或 ui 路由器(我们目前不想这样做)。

任何可以指出我们正确方向的东西将不胜感激!

跟进这一点:最后,我们认为这是一个足够奇怪的边缘情况,值得返回ui-router

虽然我们认为组件路由器最有意义,但这里的决定性因素是,不幸的是,我们无法 100% 控制我们的路由。路由约束包括组件路由器当前似乎无法处理的边缘情况。

对于那些使用较旧的oauth服务器系统的人来说,我希望这将在您选择路由器时作为警告/一些背景。

希望ngComponentRouter将来能更好地支持这种边缘情况,尽管我不会责怪他们把它排除在外。

相关内容

  • 没有找到相关文章

最新更新