1

我在 Angular2 中创建了一个身份验证管理器来直接限制组件访问。我对角度和学习概念仍然很陌生。

如果用户名不正确，我可以限制用户。但我无法使用组件中的 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]       
    }
4

3 回答 3

2

我对问题的理解是，如果身份验证失败，您想向用户显示某种错误消息。@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.

希望这是你在看的地方。它不完全是问题的答案，而是解决问题的方法。

于 2017-01-04T15:45:02.100 回答
1

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

于 2017-01-04T12:20:52.350 回答
1

这是一件非常罕见的事情，但我理解你为什么想要这样的事情。但是，无法捕获从CanActivate.

但是，您可以创建一个ErrorService组件并将其订阅到触发事件以显示 toast 消息或类似的东西。

前面未测试的代码

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

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

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

}
于 2017-01-04T12:25:46.367 回答