Question

我在Angular2中创建了一个Auth Manager来直接限制Component访问。我仍然是角色和学习概念的新手。

如果用户名不正确，我可以限制用户。但我无法使用组件中canActivate方法返回的值在前端显示消息。

我的AuthManager类

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

@Injectable()

export class AuthManager implements CanActivate{

    user = "user";

    constructor(private router:Router){

    }

    canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){
        console.log("Comes Here");
            if(this.user == "user"){
                return true;
            }else{
                console.log("YOur are not authorized");
                this.router.navigate(['/persons']);
                return false;
            }
    }
}

我能够看到你的日志未被授权，但是如何使用组件中的值。

我的app.router.ts

{
    path: 'persons/:id',
    component: PersonDetailComponent,
    canActivate:[AuthManager]       
    }

Answer 1

我对该问题的理解是，如果验证失败，您希望向用户显示某种错误消息。 @PierreDuc是正确的。但我有一个不同的方法。

您可以做的是创建服务类

authenticate.service.ts

import {Injectable} from '@angular/core'

@Injectable()

export class AuthenticateService

    isAuthenticated(//take the user credentials here):boolean{
        return true // if the credentials are correct 

     or retun false // if the credentials donot match.    

    }

在组件和AuthManager中使用此类

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

@Injectable()

export class AuthManager implements CanActivate{

    user = "user";

    constructor(private router:Router,private authenticateService:AuthenticateService){

    }

    canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){
        console.log("Comes Here");
           return  this.authenticateService.isAuthenticated();
    }
}

并在组件中检查相同的

this.authenticateService.isAuthenticated()== false
*ngIf and then display an error message to the user.

希望这就是你所看到的。这不是问题的答案，而是解决问题的方法。

Answer 2

您可以使用服务并设置要在AuthManager内的组件中显示的值。

Answer 3

这是一件非常罕见的事情，但我明白为什么你会想要这样的东西。但是，无法捕获从ErrorService返回的结果。

但是，您可以创建一个@Injectable() export class AuthManager implements CanActivate{ user = "user"; constructor(private router:Router, private errorService: ErrorService){} canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){ if(this.user == "user"){ return true; } else{ this.errorService.toastError("You are not authorized"); this.router.navigate(['/persons']); return false; } } }并为触发事件订阅一个组件，以显示一个Toast消息或类似的内容。

未经测试的代码

export class ErrorService {

   public readonly error: Subject<string> = new Subject<string>(); 

   public toastError(error: string): void {
     this.error.next(error);
   }

}

您的错误服务基本上会是这样的，您应该将此服务添加到根提供程序：

AppComponent

之后将一个组件放在@Component({ selector : 'error-toast', template : `<div [innerHtml]="error" *ngIf="error"></div>` }) export class ErrorToastComponent implements OnInit, OnDestroy { public error: string = ""; private timeout: number = 0; private errorSub: Subscription; private readonly timer: number = 5000; constructor(private errorService: ErrorService) {} ngOnInit(): void { this.errorSub = this.errorService.subscribe((error: string) => { this.toastError(error); }); } ngOnDestroy(): void { this.errorSub.unsubscribe(); this.cancelTimer(); } private toastError(error): void { this.cancelTimer(); this.error = error; this.timeout = window.setTimeout(() => { this.error = ""; }, this.timer); } private cancelTimer(): void { if(this.timeout !== 0) { clearTimeout(this.timeout); this.timeout = 0; } } }（或您认为合适的任何内容）中，并将其设为：

{{1}}

获取组件中Angular2 Route中canActivate方法返回的值？

3 个答案: