Angular2 获取 url 查询参数 [英] Angular2 get url query parameters

问题描述

我正在为我的 Angular2 网络应用设置 Facebook 注册.一旦通过 Facebook 接受应用程序(在重定向到 Facebook 授权页面后)，它会使用令牌和代码作为 url 参数重定向到我的 web 应用程序:

I'm setting up a Facebook registration for my Angular2 web app. Once the application accepted via Facebook (after being redirected to the Facebook authorization page), it redirect to my webapp with the token and code as url params:

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

但是一旦页面被加载，参数就会被删除.网址变为:

But once the page is loaded, the params are removed. The url become:

http://localhost:55976/

如何在删除参数(access_token 和代码)之前提取它们?我的路由配置包含:

How can I extract the parameters (access_token and code) before they are removed? My routing configuration contains:

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

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

Here is how I redirect to facebook in my login.component: 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 和代码参数的地方.

The facebook api redirect to http://localhost:55976/#/login/, this is where I try to get the access_token and code parameters.

编辑 2:

如果我删除重定向 url 中的尖锐，facebook 会将我重定向到正确的 URL，但没有尖锐，angular 无法解析 url.

If I remove the sharp in the redirect url, facebook redirect me to the good URL, but without the sharp, angular cannot resolve the url.

在删除#"之前:

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 - 未找到.

That mean that the problem comes from the sharp. But without the sharp, angular returns HTTP Error 404.0 - Not Found.

推荐答案

这是我最终的工作代码:

Here is my final working code:

进口:

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');
      }
    });
  }

这篇关于Angular2 获取 url 查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！