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会将我重定向到正常的网址，但如果没有锐利，则无法解析网址。

在删除＆＃39;＃＆＃39;：

之前

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

删除＆＃39;＃＆＃39;：

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的{{3}}。

要接收它们，您可以将它们放入组件的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

这是我最后的工作代码：

进口：

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

构造

{{1}}

Answer 3

使用Javascript：

(new URL(location)).searchParams.get("parameter_name")

Answer 4

getQueryParams( locationSearch: string):any {
    let params = {};
    if( locationSearch ) {
        locationSearch = locationSearch.split('?')[1];
        let splited = locationSearch.split('&');
        for( let i = 0; i < splited.length; i++ ) {
            let propName = splited[i].split('=')[0];
            let propValue = splited[i].split('=')[1];
            params[propName] = propValue;
        }
    }

    return params;
}

let q = getQueryParams( location.search );

Answer 5

这对我有用！ :)

import { ActivatedRoute } from '@angular/router'; 

constructor(private route: ActivatedRoute) { }

/** usage in the method */
let projectId = this.route.snapshot.queryParams.projectId;

Answer 6

在this帖子中检查我的答案。

[更新] 似乎有些主持人删除了我的答案，说它是重复的答案。但是我不同意，因为我根据每个问题发布了相关的代码片段。在不取消删除该答案之前，我将在此处再次发布部分答案。如果您同意，请投票取消删除我的答案。

使用window.location.hash来访问所有从＃开始的参数。或者，您可以使用window.location.href访问完整的URL。要获取令牌，您可以使用window.location.hash.match(/#access_token=([^&]+)/)[1]。

注意：如果使用TypeScript，则需要在组件中导入窗口。

declare let window;

Answer 7

你试过这个吗？

import { Params, Router } from '@angular/router';


     constructor(private router: Router) {

            this.route.params.forEach((params: Params) => {
            //here you can get your params
            let param = params['parameterName'];


            })
        }

Angular2获取url查询参数

7 个答案: