Угловая 2 Отмена навигации по маршруту на UnAuthenticate

Question

У меня есть приложение с 3-мя ссылками: Главная (/), Вход (/ пользователь/вход) и Детали пользователя (/ пользователь).

Когда пользователь нажимает Home, мое приложение будет показывать содержание общественного

Когда Detail пользователя нажмет пользователь, мое приложение будет показывать всплывающее окно входа, если пользователь отменить знак во всплывающем окне, мое приложение будет держать текущее местоположение, не изменять/пользователь.

Но я не знаю, как определить событие начала изменения маршрута и отменить это. Пожалуйста, помогите мне. Благодарю.

Answer 1

Я думаю, что вы можете расширить выход маршрутизатора для реализации такой обработки. Что-то вроде этого:

@Directive({ 
    selector: 'auth-outlet' 
}) 
export class AuthOutlet extends RouterOutlet { 
    publicRoutes: any; 
    private parentRouter: Router; 
    private authService: AuthService; 
    constructor(_elementRef: ElementRef, 
      _loader: DynamicComponentLoader, 
      _parentRouter: Router, 
      @Attribute('name') nameAttr: string, 
      _authService: AuthService) { 
    (...) 
    } 

    activate(oldInstruction: ComponentInstruction) { 
    var url = this.parentRouter.lastNavigationAttempt; 
    console.log('attemping to nav'); 
    if (!this.publicRoutes[url] && !this.authService.loggedIn){ 
     var newInstruction = new ComponentInstruction('Login', [], new RouteData(), Login, false, 1); 
     return super.activate(newInstruction); 
    } else { 
     return super.activate(oldInstruction); 
    } 
    } 
} 

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

Вы можете использовать эту директиву таким образом ип ваш шаблон:

@Component({ 
    (...) 
    template: '<auth-outlet></auth-outlet>', 
    directives: [ AuthOutlet ] 
}) 
(...) 

Смотрите эти ссылки для получения более подробной информации:

• Angular 2 Authentication with child routes
• https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

Другой вариант заключается в использовании декоратор CanActivate, но он предназначен для каждого компонента и может не применяется во всем мире.

Answer 2

Для этого я реализую концепцию authService и до доступа к любому защищенному маршруту проверю, аутентифицирован ли пользователь или нет. Если пользователь не аутентифицирован, я перенаправляю его на страницу входа. Если вы хотите кнопку отмены тоже можно нажать кнопку отмены в LOGIN Component и при нажатии на нее вы можете перенаправить пользователя обратно на предыдущий компонент с помощью CanActive hook в элементе входа). Просто попробуйте узнать об этом, и если вы хотите получить дополнительную помощь, я здесь.

auth.ts

import {Observable} from 'rxjs/Observable'; 

export class Auth { 
    constructor() { 
    this.loggedIn = false; 
    } 

    login() { 
    this.loggedIn = true; 
    } 

    logout() { 
    this.loggedIn = false; 
    } 

    check() { 
    return Observable.of(this.loggedIn); 
    } 
} 

Для дальнейшей проверки кода из,

this plunker which is nicely written for protected routes

Эта реализация, несомненно, поможет вам для использования случая.

Answer 3

Неофициальное решение, которое я нашел, это бросить NavigationCancelingError через наблюдаемое или обещание. Угловой маршрутизатор поймает этот тип ошибки, отменит навигацию и сбросит текущий маршрут. Например, это может быть сделано в решимостью так:

import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router'; 
import { NavigationCancelingError } from '@angular/router/src/shared'; 
import { Observable } from 'rxjs'; 

export class CancelingResolve implements Resolve<any> { 
    constructor(private router: Router) {} 

    resolve(route: ActivatedRouteSnapshot): Observable<any> { 
     this.router.navigate(['new-route']); // Router will navigate here after canceling the activated route. 
     return Observable.throw(new NavigationCancelingError()); 
    } 
} 

Примечание: Работает под угловыми 2.3.1