Angular2获取url查询参数

Question

我正在为我的Angular2网络应用程序设置Facebook注册.一旦应用程序通过Facebook接受(在重定向到Facebook授权页面后),它将重定向到我的webapp,其令牌和代码为url params:

http://localhost:55976/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

但是一旦页面加载,params就被删除了.网址变为:

http://localhost:55976/

如何在删除参数(access_token和代码)之前将其提取出来？我的路由配置包含:

{ path: 'login', component: LoginComponent },
{ path: 'login/:access_token/:code', component: LoginComponent },

编辑:

以下是我在login.component中重定向到facebook的方式:html:

<a class="btn btn-social btn-facebook socialaccount_provider facebook" title="Facebook" href="#" (click)="login_facebook()">
    <span class="fa fa-facebook"></span> <span style="padding-left:25px">Sign in with Facebook</span>
</a>

打字稿:

login_facebook() {
    let url = 'https://www.facebook.com/dialog/oauth?'+
        'client_id=my_client_id' +
        '&redirect_uri=' + encodeURIComponent('http://localhost:55976/#/login/') +
        '&response_type=code%20token';
    console.log(url);
    window.location.href = url;
}

facebook api重定向到http:// localhost:55976 /#/ login /,这是我尝试获取access_token和代码参数的地方.

编辑2:

如果我删除重定向网址中的锐利,facebook会将我重定向到好的网址,但没有锐利,有角度无法解析网址.

在删除'#'之前:

redirect_uri: http://localhost:55976/#/login/
facebook return: http://localhost:55976/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

删除'#'后:

redirect_uri: http://localhost:55976/login/
facebook return: http://localhost:55976/login/?#access_token=MY_ACCESS_TOKEN&code=MY_CODE

这意味着问题来自尖锐的问题.但没有尖锐,角度返回HTTP错误404.0 - 未找到.

Answer 1

你要找的查询参数的ActivatedRoute.

要接收它们,您可以将它们放入组件的OnInit功能中,如下所示:

private accesstoken;
private code;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  // Capture the access token and code
  this.route
      .queryParams
      .subscribe(params => {
          this.accesstoken = params['#access_token'];
          this.code = params['code'];
      });

  // do something with this.code and this.accesstoken
}

我在上面的链接中有更多的例子.您可能遇到角度问题,因为路由器还识别了以#开头的片段...如果angular 确实将其识别为片段,那么您只需订阅可观察的片段ActivatedRoute并以此方式执行.

我不确定你是否被重定向.如果你是,可以考虑使用preserveQueryParams导航选项,就像这样.

this.router.navigate([redirect], {preserveQueryParams: true});

Answer 2

这是我最后的工作代码:

进口:

import { Router, NavigationCancel } from '@angular/router';
import { URLSearchParams, } from '@angular/http';

构造函数:

 constructor(public router: Router) {
    router.events.subscribe(s => {
      if (s instanceof NavigationCancel) {
        let params = new URLSearchParams(s.url.split('#')[1]);
        let access_token = params.get('access_token');
        let code = params.get('code');
      }
    });
  }