Angular2 De Redirection Après La Connexion

Je suis de la création d'un système d'authentification dans angular2 avec l'idée que si un utilisateur n'est pas authentifié essaie de naviguer d'un "protégé" de l'url, le système va rediriger l'utilisateur vers la page de connexion de mettre dans l'url d'une requête de paramètre appelé "suivant" qui aidera le système de connexion de rediriger l'utilisateur de retourner à l'endroit où il voulait être, en premier lieu.

login?next=my-redirect-url

Pour protéger mes composants, je suis en utilisant le décorateur @CanActivate(isUserAuthenticated) dans chacun d'eux. Le isUserAuthenticated fonction est quelque chose comme suit:

function isUserAuthenticated(
    prevInstr: ComponentInstruction, 
    nextInstr: ComponentInstruction
): boolean {
    const authService = injector.get(AuthService);
    const router = injector.get(Router);
    if(authService.isLoggedIn()) {
        return true;
    } else {
        router.navigate(["/Login", {next: nextInstr.urlPath}]);
        return false;
    }
}

Cette approche ne fonctionne pas parce que la urlPath propriété de la nextInstr est pas à l'affiche "complet" url (il manque la requête params par exemple).

Est-il un moyen de construire l'url complète à partir d'un ComponentInstruction instance comme nextInstr?

Avez-vous vu la discussion dans github.com/angular/angular/issues/4112 je pense que c'est assez similaire à ce que vous essayez d'accomplir. Il y a également un lien vers un Plunker (n'ont pas eu un oeil de plus près moi-même).
merci pour le lien, mais j'ai déjà résolu le problème de la façon d'obtenir de l'injecteur à l'intérieur de la décoration de la fonction isUserAuthenticated. Mon problème est de savoir comment générer l'url pour rediriger l'utilisateur après la connexion.
Je n'ai pas lu tous les détails, mais j'ai l'impression que ils ont discuté de la requête params. Désolé pour le bruit alors.

OriginalL'auteur David Barreto | 2016-03-22

  1. 8

    Oui il y a un moyen:

    let url = router.generate(['./Login', {next: nextInstr.urlPath}]).toRootUrl();

    Permet de dire que la structure suivante exemple selon routeconfig:

    login?next=my-redirect-url

    Et puis vous utilisez navigateByUrl pour naviguer à l'url suivante

    router.navigateByUrl('/' + url);

    Je l'ai testé avec mon exemple et le résultat que vous pouvez voir sur l'image:

    let instruction = router.generate(['./Country', {country: 'de', a: 1, b: 2}]);
console.log(instruction, instruction.toRootUrl());

    Angular2 De Redirection Après La Connexion

    OriginalL'auteur igorzg

  2. 15

    D'une autre façon (SANS l'aide de paramètres de requête à l'aide de @angulaire/routeur 3.0.0) pour atteindre la même exigence de redirection à l'original de la ressource demandée après l'authentification consiste à utiliser RouterStateSnapshot.url, qui est une chaîne qui contient l'url de la ressource à la demande des utilisateurs. Avant de rediriger l'utilisateur vers votre formulaire de connexion après l'échec d'une tentative d'authentification, à l'intérieur de la CanActivate crochet, obtenir l'url demandée à partir de RouterStateSnapshot.url et de le stocker dans une variable qui est accessible à votre fonction de connexion. Lorsque l'utilisateur se connecte avec succès il suffit de rediriger vers les informations d'URL. Voici mon exemple:

    //GaurdService - implements CanActivate hook for the protected route

import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class GuardService implements CanActivate {
    constructor( private router: Router, private authService: AuthService ) {}

    canActivate(state: RouterStateSnapshot): boolean {
        let url: string = state.url;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if (this.authService.loggedIn()) { return true; }
        this.authService.redirectUrl = url; //set url in authService here
        this.router.navigate([ '/login' ]); //then ask user to login
        return false;
    }

}

    Mon AuthService (ci-dessous), qui effectue la connexion, va rediriger l'utilisateur à l'origine de la demande de ressources sur réussi à se connecter.

    import { Injectable, Inject } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { Router } from '@angular/router';
import { Headers, Http, Response, RequestOptions  } from '@angular/http';
import { Observable } from 'rxjs';
import './../rxjs-operators';

const API_URL: string = '';

@Injectable()
export class AuthService {
    public redirectUrl: string = ''; //Here is where the requested url is stored

constructor( @Inject('API_URL') private apiURL: string, private router: Router, private http: Http ) {}

    public loggedIn(): boolean {
        return tokenNotExpired('token');
    }

    public authenticate(username: string, password: string)  {
        let body: string = JSON.stringify({ un: username, pw: password});
        let headers: Headers = new Headers({ 'Content-Type': 'application/json' });
        let options: RequestOptions = new RequestOptions({ headers: headers });
        return this.http.post(this.apiURL + '/authenticate', body, options)
            .map(res => res.json())
            .subscribe(res => {
                localStorage.setItem('token',res.token);
                this.redirect(); //Redirect to the stored url after user is logged in
            });

        .catch(this.handleError);
    }

    private redirect(): void {
        this.router.navigate([ this.redirectUrl ]); //use the stored url here
    }
}

    C'est comment votre application peut se rappeler l'origine de la demande de ressources SANS l'aide de paramètres de requête.

    Pour plus de détails, voir l'exemple de guide angulaire.oi à partir de la "GARDE de L'ADMINISTRATEUR FONCTION de la section":
    https://angular.io/docs/ts/latest/guide/router.html#!#peut-activer-garde

    Espère que cela aide quelqu'un.

    OriginalL'auteur nthaxis