web-dev-qa-db-fra.com

Angular2 obtenir les paramètres de requête url

Je suis en train de configurer une inscription Facebook pour mon application Web Angular2 . Une fois l'application acceptée via Facebook (après avoir été redirigée vers la page d'autorisation de Facebook), elle est redirigée vers mon application Web avec le jeton et le code en tant que paramètres URL:

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

Mais une fois la page chargée, les paramètres sont supprimés. L'URL devient:

http://localhost:55976/

Comment puis-je extraire les paramètres (access_token et code) avant qu'ils soient supprimés? Ma configuration de routage contient:

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

MODIFIER:

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

Manuscrit:

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

L'API facebook redirige 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 net dans l'URL de redirection, facebook me redirige vers la bonne URL, mais sans le net, 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 avoir enlevé '#':

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 plus vif. Mais sans le tranchant, angular renvoie l'erreur HTTP 404.0 - Introuvable.

urlangularparametersrouting
25
Ben

Voici mon code de travail final:

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

Vous recherchez les paramètres de requête de ActivatedRoute.

Pour les recevoir, vous pouvez les insérer dans la fonction OnInit de votre composant, comme suit:

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 pouvez avoir des problèmes d’angulaire parce que le routeur identifie également les fragments, qui commencent par le # ... Si angulaire est-il l’identifie-t-il comme un fragment, vous pouvez simplement vous abonner au fragment observable depuis ActivatedRoute et faites-le comme ça.

Je ne sais pas si vous êtes redirigé. Si tel est le cas, ils pourraient utiliser l’option de navigation preserveQueryParams, par exemple.

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

en utilisant Javascript:

(new URL(location)).searchParams.get("parameter_name")
4
Jay Shah
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 );
2
Alex Chaliy

Cela fonctionne pour moi! :) 

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

constructor(private route: ActivatedRoute) { }

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

Vérifiez ma réponse dans this post.

[MISE À JOUR] Il semble qu'un modérateur a supprimé ma réponse en disant qu'il s'agissait d'une réponse en double. Mais je ne suis pas d'accord, car j'ai posté des extraits de code pertinents en fonction de chaque question. Tant que cette réponse n’est pas supprimée, j’affiche la partie de réponse ici. si vous êtes d’accord, votez pour annuler ma réponse.

Utilisez window.location.hash pour accéder à tous les paramètres à partir de # . Vous pouvez également utiliser window.location.href pour accéder à l'URL complète . Pour obtenir le jeton, vous pouvez utiliser window.location.hash.match(/#access_token=([^&]+)/)[1].

Remarque: Si vous utilisez TypeScript, vous devez importer une fenêtre dans votre composant.

declare let window;
0
Rajiv