angular - CanActivate 问题 TS2720

Question

我有一个关于 CanActivate 的问题

import { AuthService } from './auth.service';

import { CanActivate } from '@angular/router/src/utils/preactivation';

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

import { Observable } from 'rxjs';

import { Injectable } from '@angular/core';

@Injectable()

export class AuthGuard implements CanActivate {

    constructor(private authService: AuthService,
                private router: Router)
    {

    }
    canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot )
    : Observable<boolean> | Promise<boolean> |boolean {

        if (this.authService.isAuth) {
            return true;
        }else{
            this.router.navigate(['/auth']);
        }
    }
}

它告诉我这个:

ERROR in src/app/services/auth-guard.service.ts(10,14): error TS2720: Class 'AuthGuard' incorrectly implements class 'CanActivate'. Did you mean to extend 'Can Activate' and inherit its members as a subclass?
Type 'AuthGuard' is missing the following properties from type 'CanActivate': path, route

但我不明白为什么？

非常感谢大家!

Answer 1

您从错误的位置导入了 CanActivate 接口(interface)。应该是

从 '@angular/router' 导入 { CanActivate };

在 else 语句中 return false 也是一个好主意。