时间戳

首页 > 解决方案 > 无法在 Angular 6 中实现 CanActivate 接口

angular - 无法在 Angular 6 中实现 CanActivate 接口

问题描述

我尝试在 Angular 6 中实现 CanActivate 接口。下面是代码片段

import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate{

  constructor(private authService : AuthService, private router : Router) { }
  canActivate(){
    this.authService.user$.pipe( map( user => {
      if(user) return true;
      this.router.navigate(['/login']);
      return false;
    }));

  }

}

当我这样做时，它会在编译时异常之后抛出我

“AuthGuardService”类型中的属性“canActivate”不能分配给基类型“CanActivate”中的相同属性。类型 '() => void' 不可分配给类型 '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | 可观察 | 承诺'。类型 'void' 不能分配给类型 'boolean | 可观察 | 承诺'.ts(2416)

我理解上面的陈述，它需要返回以下类型之一'boolean | 可观察的布尔值 | 承诺布尔'

根据我的理解，上面的代码返回 Observable-boolean。我只是初学者，所以不知道什么时候出错了。

标签： angular

解决方案

更改 canActivate()

至

canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnapshot）

推荐阅读