Angular2 obtenir des paramètres de requête url

je mets en place une inscription Facebook pour mon application web Angular2. Une fois l'application acceptée via Facebook (après avoir été redirigé vers la page d'autorisation Facebook), il redirige vers mon webapp avec le jeton et le code comme URL params:

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

mais une fois la page chargée, les params sont supprimés. L'url devient:

http://localhost:55976/

Comment puis-je extraire les paramètres (access_token et code) avant de les supprimer? Ma configuration de routage contient:

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

EDIT:

Voici comment je redirige vers facebook dans mon login.composant: 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>

dactylographié:

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

la redirection de l'api facebook vers http://localhost:55976/#/login/, c'est ici que j'essaie d'obtenir les paramètres access_token et code.

EDIT 2:

si je supprime le sharp dans l'url de redirection, facebook me redirige vers la bonne URL, mais sans sharp, angular ne peut pas résoudre l'url.

avant de supprimer'#':

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

Après la suppression de '#':

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

cela signifie que le problème vient du sharp. Mais sans le sharp, angular renvoie L'erreur HTTP 404.0-non trouvé.

24
demandé sur Ben 2016-09-23 23:19:23
la source

6 ответов

Vous êtes à la recherche pour paramètres de la requêteActivatedRoute.

Pour les recevoir, vous pouvez les placer dans votre composant OnInit fonction comme ceci:

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
}

il y a plus d'exemples dans le lien que j'ai mis ci-dessus. Vous ont des problèmes avec l'angle car le routeur identifie aussi des fragments, qui commencent par le #... Si angulaire identifier comme un fragment, alors vous pouvez simplement vous abonner à la fragment observables à partir de ActivatedRoute et de le faire de cette façon.

Je ne suis pas sûr que vous soyez redirigé. Si c'est le cas, on pourrait envisager d'utiliser le preserveQueryParams option de navigation, quelque chose comme ça.

this.router.navigate([redirect], {preserveQueryParams: true});
27
répondu Federico Pettinella 2016-09-23 23:42:49
la source

Importations:

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

Constructeur:

 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');
      }
    });
  }
14
répondu Ben 2016-10-15 14:57:17
la source

en utilisant Javascript:

(new URL(location)).searchParams.get("parameter_name")
3
répondu Jay Shah 2017-07-10 18:48:56
la source
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 );
1
répondu Alex Chaliy 2017-11-03 04:48:13
la source

Cela fonctionne pour moi! :)

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

constructor(private route: ActivatedRoute) { }

/** usage in the method */
let projectId = this.route.snapshot.queryParams.projectId;
0
répondu Tejashree 2018-05-25 08:57:19
la source

avez-vous essayé?

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'];


            })
        }
-1
répondu Emmanuel Villegas 2016-09-23 23:28:30
la source

Autres questions sur