Question

我有一个应用程序，有3个链接：主页（/），登录（/ user / sign-in）和用户详细信息（/ user）。

当用户点击主页时，我的应用将显示内容公开

当用户点击用户详细信息时，我的应用将显示弹出窗口，如果用户取消登录弹出窗口，我的应用将保持当前位置，而不是更改为/ user。

但我不知道检测到路线更改开始事件并取消此操作。请帮我。感谢。

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

当显示路线时，将调用activate方法。您可以在此级别添加处理。

您可以通过这种方式使用此指令：

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

有关详细信息，请参阅以下链接：

另一种选择是使用CanActivate装饰器，但每个组件都是如此，并且无法全局应用。

Answer 2

为此，我将实现authService概念，在访问任何受保护的路由之前，我将检查用户是否经过身份验证。如果用户未经过身份验证，我会将他重定向到登录页面。如果您也想要取消按钮，您可以在LOGIN Component和 中放置取消按钮，当您按下它时，您可以使用登录组件中的CanActive挂钩将用户重定向回上一个组件 < /强>）。试着去学习这个，如果你想要任何进一步的帮助我就在这里。

<强> 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。 Angular的路由器将捕获此错误类型，取消导航，并重置当前路由。例如，这可以通过如下决定来完成：

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

注意：在Angular 2.3.1下工作

Angular 2取消UnAuthenticate上的路线导航

3 个答案: