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

Question

我正在尝试找到一种方法来处理设置Angular2 Typescript路由(使用3.0.0-alpha.8路由器),该路由将处理以散列片段开头的路由.

我正在处理的应用程序通过带有oauth2的rails后端处理所有外部登录(我无法控制的东西).将用户重定向到外部登录页面工作正常但是当重定向URL时,总是某种形式http://localhost:4200#access_token=TOKEN(其中TOKEN是一系列数字和字母)被发回但我无法弄清楚如何设置可以处理#签署所以我可以抓住它并重定向到适当的组件.

在以前的Angular1应用程序中ui-router,能够使用以下路线:

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

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

然而,这个应用程序是Angular2和Typescript,路由器查询参数似乎不那么灵活,我在实现类似的解决方案时遇到了麻烦.我一直在基于文档中的这一部分,但所有的例子都是建立其他东西,/heroes在进入查询参数的复杂部分之前,例如/heroes/:id.我也搜索了stackoverflow,并且无法找到任何可以使用Angular2和Typescript以及当前路由器的东西.

这是我目前的(非工作)解决方案:

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)
];

如果我拿回发送回的重定向网址并将其修改(纯粹用于测试目的)http://localhost:4200/access_token=TOKEN就可以了.不幸的是,我实际上并没有控制现实生活中重定向网址的格式,我无法提出一个解决方案,可以处理它以哈希片段而不是a /然后我的查询参数开始的事实.所有我能找到的带有复杂符号或字符的路由示例都以a开头/.

我尝试修改上面的解决方案:access_token,这是不起作用的,并将其列为基本路径下的子路由,如下所示:

{
  path: '',
  component: HomeComponent,
  terminal: true,
  children: [
    { path: 'access_token',  component: TestComponent },
  ]
}

这导致以下控制台错误: platform-browser.umd.js:2312 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

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

Answer 1

我最终能够找到一个使用首选PathLocationStrategy的解决方案,但是在删除哈希片段之后的url部分之前也将令牌从oauth重定向uri中拉出来(从这里从QueryParams和Fragment中提取的最终答案)以下博文中的部分).

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

{
  path: 'login',
  component: LoginComponent
}

这会捕获重定向url,但会删除散列片段后的所有内容,删除我需要的令牌.为了防止它在散列片段之后丢弃所有内容,我将以下代码添加到我的构造函数中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中的'fragment is possible null'typescript错误,并在tsconfig.json中将strictNullChecks设置为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);
    }