带有ui-router-ng2的通配符路由？答案

【问题标题】：Wildcard route with ui-router-ng2?带有ui-router-ng2的通配符路由？
【发布时间】：2017-07-15 15:00:22
【问题描述】：

我正在尝试将 ui-router-ng2 与 Auth0（身份验证即服务提供商）一起使用。问题是登录后 Auth0 将用户重定向到如下所示的 url：

http://localhost:3000/#access_token=alCUyTW2WKLkV8Fq&{etc...}

我已尝试更改该重定向 url，使其命中组件，但使用 auth0 似乎不可能。

使用 ui-router 1，可以添加 http 拦截来处理此问题，但此时 angular 2 中没有 http 拦截功能。

当使用 auth0 和 angular 2 默认路由器时，重定向的处理方式如下：

  this
    .router
    .events
    .filter(event => event.constructor.name === 'NavigationStart')
    .filter(event => (/access_token|id_token|error/).test(event.url))
    .subscribe(() => {
      this.lock.resumeAuth(window.location.hash, (error, authResult) => {
        if (error) return console.log(error);
        localStorage.setItem('id_token', authResult.idToken);
        this.router.navigate(['/']);
      });

我浏览了 ui-router-ng2 文档，但没有找到类似的方法。

有什么想法吗？

【问题讨论】：

标签： angular angular-ui-router auth0

【解决方案1】：

我通过在我的应用程序的根组件中执行以下操作来解决此问题：

export class AppComponent {

  constructor() {
    console.log("App root component created");

    // Auth0 doesn't redirect properly to /#/ URLs so we have to capture token here 
    var regex = /(id_token=)([^&]*)/;
    var vals = regex.exec(window.location.hash);
    if (vals != null) {
      localStorage.setItem('id_token', vals[2]);
      if(localStorage.getItem('preAuthURL') != null) { window.location.href = localStorage.getItem('preAuthURL');}
    }

  }
}

【讨论】：