Использование Angular2, как перенаправить на предыдущий URL-адрес до переадресации входа

Question

Использование Angular2 для создания одностраничного приложения, я перехватываю неавторизованный доступ пользователей к непубличным маршрутам в пользовательском RouterOutlet и перенаправляет их в режим входа. После успешного входа в систему я хочу перенаправить пользователя в свое первоначально запрошенное представление, а не по умолчанию.

Я заметил, что Router имеет renavigate() функцию, которая переходит к последней успешной маршрута, но последний успешный маршрут был /auth/login и не первоначально заявленное URL.

В принципе: Как я могу получить доступ или определить ранее запрошенный URL?

Я действительно не хочу прибегать к передаче параметров строки запроса, если только мне это не нужно. В идеале было бы неплохо иметь доступ к коллекции history как часть компонента Router, похожее на backbone.history!

Answer 1

1. Использование аутентификации Guards (орудия CanActivate) для предотвращения неаутентифицированных пользователей. См. official documentation с примерами и this blog.

2. Используйте RouterStateSnapshot в защитнике, чтобы захватить запрошенный URL.

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) 
   { 
       // keep the attempted URL for redirecting 
       this._loginService.redirectUrl = state.url; 
   } 
   

3. Перенаправление к этому URL на успешной аутентификации с использованием Router (например, в login.component.ts). Например. this._router.navigateByUrl(redirectUrl);

P.S. Предложения @MichaelOryl и @Vitali будут работать, но мой путь более согласован с окончательным выпуском Angular2.

Answer 2

Вы можете найти то, что вам нужно в docs для класса Location. Функция back() может сделать это за вас.

Другим подходом было бы подписаться на события popstate в Location. MDN has docs говорить о значениях, которые вы ожидаете получить.

class MyCLass { 
    constructor(private location: Location) { 
    location.subscribe((val) => { 
     // do something with the state that's passed in 
    }) 
    } 
} 

В противном случае может потребоваться служба, которая отслеживает изменения в маршрутизаторе, чтобы вы могли получить к ним доступ.

class MyTrackingService { 
    constructor(private router: Router) { 
    router.subscribe((val) => { 
     // store the routes here so that you can peel them off as needed? 
    }) 
    } 
} 

В этом случае я получить доступ к Router объект и подписываться на любые изменения, чтобы я мог отслеживать их.

Answer 3

Это сработало для меня. Внесите его в свой конструктор компонента основного приложения, зарегистрировав его в методе начальной загрузки. Первым val на загрузку страницы должен быть исходный URL. Я отказываюсь от подписки сразу после того, чтобы быть эффективным, так как я не (возможно, еще) хочу слушать последующие события маршрутизатора в этой службе. Внесите сервис в другие места, где требуется оригиналUrl.

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

} 

Answer 4

Обновленный пример использования углового 2.2.1

Auth Guard, который проходит оригинальный URL для входа в систему компонент:

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' 
}) 

Войти Компонент, который перенаправляет к предыдущему/первоначальному URL после входа в систему:

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

Для получения более подробной информации и рабочей Демонстрационный можно проверить this post