使用 Angular2 从 url 中检索哈希片段
Retrieve hash fragment from url with Angular2
鉴于此 url 结构(我无法控制),我如何使用 Angular2 检索散列片段?
http://your-redirect-uri#access_token=ACCESS-TOKEN
我的路由器确实路由到正确的组件,但是 oauth
之后的所有内容都被废弃了,我在 request.params 或 location.path 中找不到哈希片段。命中注定??
路由器配置:
@RouteConfig([
{path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true},
{path: '/landing/oauth', name: 'Landing', component: LandingComponent} // this one
])
我通过 response_type
=token
请求 OAuth 服务器遇到了同样的问题,谁重定向到 %REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in
。
问题是,默认情况下,对子 url 的直接访问不会被路由:在您的情况下,%BASE_URL%/landing/oauth
不会重定向到 LandingComponent
组件。
我用这个配置修复了它:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { ROUTER_PROVIDERS } from '@angular/router';
import { AppComponent } from './components/app/app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, { useValue: '/' }) // this line
]);
对于那些仍在寻找的人:
import { ActivatedRoute } from '@angular/router';
export class MyComponent {
constructor(
private route: ActivatedRoute,
) { }
myfunction(){
this.route.fragment.subscribe((fragment: string) => {
console.log("My hash fragment is here => ", fragment)
})
}
}
您也可以使用 ActivatedRouteSnapshot 而无需订阅它的所有更改。
@Component({templateUrl:'./my-component.html'})
class MyComponent {
constructor(route: ActivatedRoute) {
const fragment: string = route.snapshot.fragment;
}
}
为了扩展当前的答案,我想提出一种简单的方法来解析散列中的查询参数(特别是针对联合响应),因为 ActivatedRoute
似乎无法原生处理该问题。
this.route.fragment.subscribe(fragment => {
const response = _.fromPairs(Array.from(new URLSearchParams(fragment)));
response.access_token;
response.id_token;
response.expires_in;
response.token_type;
});
首先使用要查询其值的片段创建一个新的 URLSearchParams 对象:
new URLSearchParams(fragment).get('access_token');
在大多数情况下,这可能是所有需要的,但如果需要将其转换为对象,Array.from
会将 URLSearchParams
转换为数组数组,如下所示:[['key', 'value'], ...]
.然后 lodash 的 _.fromPairs
将其转换为一个对象。
我从 nwayve 那里获取了评论并使用 RxJS 管道实现它,如下所示:
this.route.fragment
.pipe(
map(fragment => new URLSearchParams(fragment)),
map(params => ({
access_token: params.get('access_token'),
id_token: params.get('id_token'),
error: params.get('error'),
}))
)
.subscribe(res => console.log('', res));
您可以随时使用以下代码检索 url 片段 - 它使用了 Router
服务:
const urlTree = this.router.parseUrl(this.router.url);
console.log(urlTree.fragment); //access_token=ACCESS-TOKEN
假设您在构造函数中使用 ActivatedRoute class,试试这个:
let params = this.route.snapshot.fragment;
const data = JSON.parse(
'{"' +
decodeURI(params)
.replace(/"/g, '\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
);
console.log(data); // { json: "with your properties"}
使用普通 javascript 解析片段数据的选项是
this.activatedRoute.fragment.subscribe(value => {
let fragments = value.split('&')
let fragment = {}
fragments.forEach(x => {
let y = x.split('=')
fragment[y[0]] = y[1]
})
})
信息将采用易于访问的对象形式。
我试过了,但是快照是一个空字符串。
以下是对我有用的方法:
ngOnInit(): void {
this.route.fragment.subscribe({
next: value => {
if (value === null) {
throw new Error('not implemented');
}
const access_token = new URLSearchParams(value).get('access_token')
console.log({access_token})
}
});
}
鉴于此 url 结构(我无法控制),我如何使用 Angular2 检索散列片段?
http://your-redirect-uri#access_token=ACCESS-TOKEN
我的路由器确实路由到正确的组件,但是 oauth
之后的所有内容都被废弃了,我在 request.params 或 location.path 中找不到哈希片段。命中注定??
路由器配置:
@RouteConfig([
{path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true},
{path: '/landing/oauth', name: 'Landing', component: LandingComponent} // this one
])
我通过 response_type
=token
请求 OAuth 服务器遇到了同样的问题,谁重定向到 %REDIRECT_URI%#access_token=:access_token&token_type=:token_type&expires_in=:expires_in
。
问题是,默认情况下,对子 url 的直接访问不会被路由:在您的情况下,%BASE_URL%/landing/oauth
不会重定向到 LandingComponent
组件。
我用这个配置修复了它:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { ROUTER_PROVIDERS } from '@angular/router';
import { AppComponent } from './components/app/app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, { useValue: '/' }) // this line
]);
对于那些仍在寻找的人:
import { ActivatedRoute } from '@angular/router';
export class MyComponent {
constructor(
private route: ActivatedRoute,
) { }
myfunction(){
this.route.fragment.subscribe((fragment: string) => {
console.log("My hash fragment is here => ", fragment)
})
}
}
您也可以使用 ActivatedRouteSnapshot 而无需订阅它的所有更改。
@Component({templateUrl:'./my-component.html'})
class MyComponent {
constructor(route: ActivatedRoute) {
const fragment: string = route.snapshot.fragment;
}
}
为了扩展当前的答案,我想提出一种简单的方法来解析散列中的查询参数(特别是针对联合响应),因为 ActivatedRoute
似乎无法原生处理该问题。
this.route.fragment.subscribe(fragment => {
const response = _.fromPairs(Array.from(new URLSearchParams(fragment)));
response.access_token;
response.id_token;
response.expires_in;
response.token_type;
});
首先使用要查询其值的片段创建一个新的 URLSearchParams 对象:
new URLSearchParams(fragment).get('access_token');
在大多数情况下,这可能是所有需要的,但如果需要将其转换为对象,Array.from
会将 URLSearchParams
转换为数组数组,如下所示:[['key', 'value'], ...]
.然后 lodash 的 _.fromPairs
将其转换为一个对象。
我从 nwayve 那里获取了评论并使用 RxJS 管道实现它,如下所示:
this.route.fragment
.pipe(
map(fragment => new URLSearchParams(fragment)),
map(params => ({
access_token: params.get('access_token'),
id_token: params.get('id_token'),
error: params.get('error'),
}))
)
.subscribe(res => console.log('', res));
您可以随时使用以下代码检索 url 片段 - 它使用了 Router
服务:
const urlTree = this.router.parseUrl(this.router.url);
console.log(urlTree.fragment); //access_token=ACCESS-TOKEN
假设您在构造函数中使用 ActivatedRoute class,试试这个:
let params = this.route.snapshot.fragment;
const data = JSON.parse(
'{"' +
decodeURI(params)
.replace(/"/g, '\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
);
console.log(data); // { json: "with your properties"}
使用普通 javascript 解析片段数据的选项是
this.activatedRoute.fragment.subscribe(value => {
let fragments = value.split('&')
let fragment = {}
fragments.forEach(x => {
let y = x.split('=')
fragment[y[0]] = y[1]
})
})
信息将采用易于访问的对象形式。
我试过了,但是快照是一个空字符串。
以下是对我有用的方法:
ngOnInit(): void {
this.route.fragment.subscribe({
next: value => {
if (value === null) {
throw new Error('not implemented');
}
const access_token = new URLSearchParams(value).get('access_token')
console.log({access_token})
}
});
}