web-dev-qa-db-fra.com

Angular2 - Rediriger vers une URL appelante après une connexion réussie

J'ai mon application en marche avec Angular 2.1.0. Les itinéraires sont protégés via des gardes de routeur, canActivate.

Lorsque vous pointez le navigateur sur une zone protégée telle que "localhost: 8080/clients", je suis redirigé vers ma page de connexion, comme prévu.

Mais après une connexion réussie, j'aimerais être redirigé vers l'URL d'appel ("/ clients" dans ce cas).

Le code pour gérer la connexion ressemble à ceci

login(event, username, password) {
  event.preventDefault();
  var success = this.loginService.login(username, password);
  if (success) {
    console.log(this.router);
    this.router.navigate(['']);
  } else {
    console.log("Login failed, display error to user");
  }
}

Le problème est que je ne sais pas comment mettre la main sur l’URL d’appel depuis la méthode de connexion.

J'ai trouvé une question (et une réponse) à ce sujet, mais je n'y comprenais rien. redirection angulaire2 après la connexion

angularangular2-routing
20
Anders Bergquist

Il y a un bon exemple dans Angular Docs, Apprendre à authentifier Authguard . En gros, l'idée est d'utiliser votre AuthGuard pour vérifier votre statut de connexion et stocker l'URL sur votre AuthService Une partie du code est sur l'URL ci-dessus.

AuthGuard 

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

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn) { return true; }

    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;

    // Navigate to the login page with extras
    this.router.navigate(['/login']);
    return false;
  }
}

AuthService ou votre LoginService

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
  isLoggedIn: boolean = false;    
  // store the URL so we can redirect after logging in
  public redirectUrl: string;

  constructor (
   private http: Http,
   private router: Router
  ) {}

  login(username, password): Observable<boolean> {
    const body = {
      username,
      password
    };
    return this.http.post('api/login', JSON.stringify(body)).map((res: Response) => {
      // do whatever with your response
      this.isLoggedIn = true;
      if (this.redirectUrl) {
        this.router.navigate([this.redirectUrl]);
        this.redirectUrl = null;
      }
    }
  }

  logout(): void {
    this.isLoggedIn = false;
  }
}

Je pense que cela vous donnera une idée du fonctionnement, bien sûr vous devrez probablement vous adapter à votre code

39
Fabio Antunes

Ce code traitera votre demande:

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

  canActivate(next: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.isVerified
      .take(1)
      .map((isVerified: boolean) => {
        if (!isVerified) {
          this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
          return false;
          // return true;
        }
        return true;
      });
  }
}

mais sachez que les paramètres d'URL ne passeront pas avec l'URL !!

Vous pouvez trouver un tutoriel Nice ici: http://jasonwatmore.com/post/2016/12/08/angular-2-redirect-to-previous-url-after-login-with -auth-guard

2
Yuri