类 'AuthGaurd' 错误地实现了接口 CanActivate答案

【问题标题】：Class 'AuthGaurd' incorrectly implements interface CanActivate类 'AuthGaurd' 错误地实现了接口 CanActivate
【发布时间】：2019-02-27 07:23:45
【问题描述】：

我是初学者，在按照这些教程学习 Angular 时，当我按照他在教程中所做的那样实现接口 CanAcivate 时显示错误

“AuthGaurd”类错误地实现了“CanActivate”接口。 “AuthGaurd”类型中缺少属性“canActivate”，但在“CanActivate”类型中是必需的。ts(2420)

这里是 Canactivate 的实现

export class AuthGaurd implements CanActivate
{
  constructor(private auth: AuthService, private router: Router) { }
  CanActivate(){
    return this.auth.user$.map(user => {
      if (user) return true;
      this.router.navigate(['/login']);
      return false;
    });
  }
}`

这里是进口

 import { Injectable } from '@angular/core';
    import { AuthService } from './auth.service';
    import { CanActivate } from '@angular/router/src/utils/preactivation';
    import { Router } from '@angular/router';
    import 'rxjs/add/operator/map';

我将 Import 从 import { CanActivate } from '@angular/router/src/utils/preactivation'; 更改为 import { CanActivate } from '@angular/router; But not work

我还在 canActivate 中添加以下内容，因为我在 StackOverflow 上观看了一个答案，但它对我也不起作用

 CanActivate(next: ActivatedRouteSnapshot,
 state: ActivatedRouteSnapshot): Observable<boolean>

【问题讨论】：

方法应该是canActivate()。即在骆驼情况下。请参考angular.io/api/router/CanActivate

标签： angular interface observable angular-guards

【解决方案1】：

你的方法应该是 canActivate() 并且它应该返回Observable<boolean> | boolean:

import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from "@angular/router";

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
      this.auth.user$.map(user => {
          if (user) return true;
      this.router.navigate(['/login']);
      return false;
    });
    }

【讨论】：

没有这个“路由：ActivatedRouteSnapshot，状态：RouterStateSnapshot）会正常工作：Observable | boolean”
这是最佳实践。

【解决方案2】：

注意canActivate函数的驼峰式，并使用必要的参数来实现函数。

【讨论】：

【解决方案3】：

您应该从 canActivate 方法返回一个布尔值。你的方法有拼写错误。它应该是 canActivate 而不是 CanActivate。 CanActivate 是接口名称，canActivate 是方法名称

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

export class AuthGaurd implements CanActivate
{
  constructor(private auth: AuthService, private router: Router) { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){

    this.auth.user$.map(user => {
      if (user) return true ;
      this.router.navigate(['/login']);
      return false;
    });


  }
}

【讨论】：