我正在处理的应用程序通过带有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 },]
}
这导致以下控制台错误：
platform-browser.umd.js：2312 EXCEPTION：错误：未捕获(在承诺中)：错误：无法匹配任何路由：”
我觉得绝对必须有一个干净的解决方案,特别是因为这么多的API通过像这样的重定向URL处理他们的身份验证,但无论我多么深入研究我似乎无法找到它的文档.关于如何实现这一点的任何建议将非常感激.
基本上我在使用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&如果有人需要,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运算符已经变为可管理,这意味着你必须在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);
}