Question

我尝试为我的应用程序实现身份验证保护，这是我的代码：

import {Injectable} from '@angular/core'
import {Router, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'
import {CanActivate} from '@angular/router'
import {Auth} from './services/auth.service'

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth:Auth, private router:Router){

    }
    CanActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
        if(this.auth.authenticated()){
        console.log("AUTH GUARD LET GO");
        return true;
        }
        else{
            console.log("BLOCKED BY AUTH GUARD");
            this.router.navigate(['/']);
            return false;
        }
    }
}

和错误消息：

[ts]类'AuthGuard'错误地实现了接口'CanActivate'。 “AuthGuard”类型中缺少“canActivate”属性。

我在网上搜索，但无法找到任何有价值的信息，请帮助我，如果你遇到过这类问题并解决了或者你有任何想法......

Answer 1

错误是说您的应用无法找到正确的功能，可用于激活。 canActivate函数名称是camelCase，尝试

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    //logic
}

Answer 2

当您从错误的库导入时，有时会发生此问题。检查导入语句。将
import { CanActivate } from'@angular/router/src/utils/preactivation';
更改为
import { CanActivate } from '@angular/router';

谢谢！

angular2实现了AuthGuard

2 个答案: