Utilisation de Angular2, comment rediriger vers l'URL précédente avant la redirection de connexion

À l'aide de Angular2 pour créer une page d'application, je suis interception utilisateur non authentifié l'accès à la non-public des routes dans un personnalisé RouterOutlet et les rediriger vers une connexion de point de vue. Après une connexion réussie, je veux rediriger l'utilisateur vers leur origine de la demande de la vue, plutôt que la vue par défaut.

J'ai remarqué que Router a un renavigate() fonction qui permet de naviguer vers le dernier vainqueur de la route, MAIS le dernier vainqueur de la route a été /auth/login et pas à l'origine de la requête url.

En gros : Comment puis-je avoir accès à, ou de déterminer la url?

Je ne veux pas vraiment à la station de passage des paramètres de chaîne de requête partout, sauf si j'ai vraiment besoin de. Idéalement, il serait bien d'avoir accès à history collecte dans le cadre de la Router composant, semblable à backbone.history!

source d'informationauteur Jonathan Miles | 2015-12-31

17
1. Utilisation Auth Gardes (implémente CanActivate) pour empêcher les utilisateurs non authentifiés. Voir la documentation officielle avec des exemples et des ce blog.
2. Utilisation RouterStateSnapshot dans la auth garde à la capture de l'URL demandée.
```
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) 
{
    //keep the attempted URL for redirecting
    this._loginService.redirectUrl = state.url;
}
```
3. Rediriger vers l'URL sur la réussite de l'authentification avec l'aide de Routeur (par exemple, dans le login.component.ts). E. g. this._router.navigateByUrl(redirectUrl);
P. S. Suggestions de @MichaelOryl et @Vitali, mais mon chemin est plus aligné avec la Angular2 sortie de la version finale.
6

Vous pourriez trouver que vous avez besoin dans le docs pour la Location classe. Le back() fonction pourrait éventuellement le faire pour vous.

Une autre approche serait de vous abonner à la popstate événements dans Locationà la place. MDN a docs parler des valeurs que l'on pourrait attendre de recevoir.
```
class MyCLass {
  constructor(private location: Location) {
    location.subscribe((val) => {
        //do something with the state that's passed in
    })
  }
}
```
Sinon, vous voudrez peut-être un service qui assure le suivi des changements dans le Routeur afin que vous puissiez y accéder.
```
class MyTrackingService {
  constructor(private router: Router) {
    router.subscribe((val) => {
        //store the routes here so that you can peel them off as needed?
    })
  }
}
```
Dans ce cas, je suis accès à la Router objet et l'abonnement à des changements afin que je puisse les suivre.
4

Cela a fonctionné pour moi. L'injecter dans votre Application principale composante du constructeur inscrit dans la méthode du bootstrap.
La première val au chargement de la page doit être l'URL d'origine.
Je suis à vous désabonner tout de suite après pour être efficace puisque je ne sais pas (peut-être, encore) envie d'écouter ultérieure routeur événements dans ce service.
Injecter le service dans d'autres endroits où originalUrl est nécessaire.
```
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Injectable()
export class UrlTrackingService {

  public originalUrl: string;

  constructor(
    private router: Router
  ) {
    let subscription: Subscription = this.router.events.subscribe((val) => {
      this.originalUrl = val.url;
      subscription.unsubscribe();
    });
  }

}
```

Mis À Jour Exemple À L'Aide Angulaire 2.2.1

Auth Garde qui passe l'URL d'origine de la connexion de composant:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            //logged in so return true
            return true;
        }

        //not logged in so redirect to login page with the return url
        this.router.navigate(['/login', { returnUrl: state.url }]);
        return false;
    }
}

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../_services/index';

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

Composant Login qui redirige vers la précédente /URL originale après la connexion:

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) { }

    ngOnInit() {
        //reset login status
        this.authenticationService.logout();

        //get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.params['returnUrl'] || '/';
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    //login successful so redirect to return url
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    //login failed so display error
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

Pour plus de détails et de travail de démonstration, vous pouvez consulter la ce post

Vous devez vous connecter pour publier un commentaire.