如何在Angular2 rc3路由中处理来自oauth重定向URL的哈希片段
|
我正在尝试找到一种方法来处理设置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,路由器查询参数似乎不太灵活,我在实现类似的解决方案时遇到了麻烦.我一直在文档中以this section为基础,但所有的例子都是建立其他东西,前/英雄在进入查询参数的复杂部分之前,ex / 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,它可以正常工作.不幸的是,我实际上并没有控制现实生活中重定向网址的格式,我无法提出一个解决方案,可以处理它以哈希片段而不是/然后我的查询参数开始的事实.所有我能找到的带有复杂符号或字符的路由示例都以/开头. 我尝试将上面的解决方案修改为：access_token,它不起作用,以及将其列为基本路由下的子路由,如下所示： {
path: '',terminal: true,children: [
{ path: 'access_token',component: TestComponent },]
}
这导致以下控制台错误： 我觉得绝对必须有一个干净的解决方案,特别是因为这么多的API通过像这样的重定向URL处理他们的身份验证,但无论我多么深入研究我似乎无法找到它的文档.关于如何实现这一点的任何建议将非常感激.
我最终能够找到一个使用首选PathLocationStrategy的解决方案,但是在删除散列片段之后的url部分之前也将令牌从oauth重定向uri拉出(从最终答案
here中取出来自QueryParams和Fragment以下
blog post中的部分).
基本上我在使用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部分的方式.如果有人有更好的解决方案,请随时更新/发布此处. 更新： 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运算符已经变为可管理,这意味着你必须在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);
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |