Question

我试图找到一种方法来处理设置Angular2 Typescript路由（使用3.0.0-alpha.8路由器）来处理以散列片段开头的路由。

我正在处理的应用程序通过带有oauth2的rails后端处理所有外部登录（我无法控制的东西）。将用户重定向到外部登录页面工作正常但是当重定向网址时，总是会发送某种形式的http://localhost:4200#access_token=TOKEN（其中TOKEN是一系列数字和字母），但我无法弄清楚如何设置一条可以处理#符号的路由，这样我就可以捕获它并重定向到相应的组件。

在之前的Angular1应用中，ui-router能够在以下路线中使用：

.state('accessToken', {
  url: '/access_token=:token',
  controller: 'LoginController',
  params: { token: null }
})

并且接受发送回的重定向网址没有问题，然后将所有内容传递给LoginController以处理前端的其余身份验证/令牌业务。

然而，这个应用程序是Angular2和Typescript，路由器查询参数似乎不那么灵活，我在实现类似的解决方案时遇到了麻烦。我已经根据文档中的this section进行了操作，但所有示例都在构建其他内容，ex /heroes之后才进入查询参数的复杂部分，ex {{1} }。我也搜索了stackoverflow，并且无法找到与Angular2和Typescript以及当前路由器一起工作的任何东西。

这是我目前的（非工作）解决方案：

/heroes/:id

如果我将发回的重定向网址（仅用于测试目的）修改为import { provideRouter, RouterConfig } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; import { TestComponent } from './components/test/test.component'; export const appRoutes: RouterConfig = [ { path: '', component: HomeComponent, terminal: true }, { path: 'access_token', component: TestComponent } ]; export const APP_ROUTER_PROVIDERS = [ provideRouter(appRoutes) ];，它可以正常工作。不幸的是，我实际上无法控制现实生活中重定向网址的格式，我无法提出一个解决方案，可以处理以哈希片段而非{{1}开头的事实。然后我的查询参数。所有我能找到的带有复杂符号或字符的路由示例均以http://localhost:4200/access_token=TOKEN开头。

我尝试将上面的解决方案修改为/，这不起作用，并将其列为基本路线下的子路线，如下所示：

导致以下控制台错误： :access_token

我觉得绝对必须有一个干净的解决方案，特别是因为有这么多的API通过这样的重定向网址来处理他们的身份验证，但无论我多么深入了解我似乎无法找到的文档它。关于如何实现这一点的任何建议都将非常感激。

Answer 1

我最终能够找到一个使用首选PathLocationStrategy的解决方案，但是在删除散列片段之后的url部分之前也将令牌拉出oauth重定向uri（从最终答案here开始从以下blog post中的QueryParams和Fragment部分中提取。

基本上我在使用doorkeeper / oauth2注册我的应用程序时更新了重定向网址http://localhost:4200/login/（这导致包含令牌的重定向网址看起来像http://localhost:4200/login/#access_token=TOKEN）并添加了以下路由：

{
  path: 'login',
  component: LoginComponent
}

这会捕获重定向网址，但会删除散列片段后的所有内容，删除我需要的令牌。为了防止它在散列片段之后丢弃所有内容，我将以下代码添加到LoginComponent的构造函数中：

constructor(private activatedRoute: ActivatedRoute, 
            private router: Router, 
            private tokenService: TokenService) {

// Pulls token from url before the hash fragment is removed

const routeFragment: Observable<string> = activatedRoute.fragment;
routeFragment.subscribe(fragment => {
  let token: string = fragment.match(/^(.*?)&/)[1].replace('access_token=', '');
  this.tokenService.setToken(token);
});

}

您选择如何处理令牌取决于您（我有一个TokenService，其中包含从localStorage设置，检索和清除它的方法），但这是您在哈希片段之后访问url部分的方式。如果有人有更好的解决方案，请随时更新/发布此处。

更新：对Angular v4.2.0＆amp;如果有人需要，strictNullChecks在tsconfig.json中设置为true。功能是一样的：

let routeFragment = this.activatedRoute.fragment.map(fragment => fragment);

routeFragment.subscribe(fragment => {
  let f = fragment.match(/^(.*?)&/);
  if(f) {
   let token: string = f[1].replace('access_token=', '');
   this.tokenService.setToken(token);
}

注意：从RxJS 6开始，map运算符已被设为可管道化，这意味着您必须使用pipe Observable方法传递它，如下所示：

import { map } from 'rxjs/operators';

// ...

this.activatedRoute.fragment
  .pipe(map(fragment => fragment))
  .subscribe(fragment => {
    let f = fragment.match(/^(.*?)&/);
    if(f) {
      let token: string = f[1].replace('access_token=', '');
      this.tokenService.setToken(token);
    }

如何在Angular2 rc3路由中处理来自oauth重定向URL的哈希片段

1 个答案: