2

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

关键球员

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

目标

我们想要一个 URL，例如http://mysite/#!/auth/#auth_token=xyz123（结构不受我们控制，例如无法删除第二个哈希）和：

  • 将其放入实际的身份验证控制器
  • 使 auth_token 值可用，通过参数或直接通过$location. （它目前在到达控制器之前已被擦洗）。

背景/问题

我们的客户有一个中央登录系统，他们在其中使用 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-router（我们现在不想这样做）。

任何可以为我们指明正确方向的事情都将不胜感激！

4

1 回答 1

1

跟进这一点：最后，我们认为这是一个足够奇怪的极端情况，值得回到ui-router.

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

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

希望 ngComponentRouter 将来能更好地支持这种边缘情况，尽管我不会责怪他们忽略了它。

于 2016-04-06T18:57:38.110 回答