“NeedAuthGuard”类错误地实现了“CanActivate”类。您的意思是扩展“CanActivate”并将其成员作为子类继承吗？

Posted 2023-02-23

【中文标题】“NeedAuthGuard”类错误地实现了“CanActivate”类。您的意思是扩展“CanActivate”并将其成员作为子类继承吗？

【英文标题】：Class 'NeedAuthGuard' incorrectly implements class 'CanActivate'. Did you mean to extend 'CanActivate' and inherit its members as a subclass?

【发布时间】：2019-06-09 05:06:01

【问题描述】：

你好，我是 Angular 6 的新手，我面临一个关于身份验证的问题，以提取用户在没有登录的情况下不去任何页面，我面临的问题是

“NeedAuthGuard”类型缺少“CanActivate”类型的以下属性：路径、路由 [2720]

这是我的代码

           import  Injectable  from '@angular/core';
import  HttpClientModule, HttpClient, HttpRequest  from '@angular/common/http';
import  Observable, from  from 'rxjs';
import  map, tap  from 'rxjs/operators';
import  CanActivate  from '@angular/router/src/utils/preactivation';
import  LoginComponent  from '../Component/login/login.component';
import  Router, ActivatedRouteSnapshot, RouterStateSnapshot  from '@angular/router';
@Injectable(
  providedIn: 'root'
)//NeedAuthGuard
export class ServiceTService 
  constructor(
    private http: HttpClient
  ) 
  
  users: any =  
    id: String,
    Email:String,
    Password: Number
  ;
  getUser(): Observable<any> 
    return this.http.get<any>("http://localhost:3000/users");

  



@Injectable()
export class NeedAuthGuard implements CanActivate 

  constructor(private customerService: LoginComponent, private router: Router)   
  

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) 

    const redirectUrl = route['/Store'];

    if ( this.customerService.UserIsLogin) 
      return true;
    
    this.router.navigateByUrl(
      this.router.createUrlTree(
        ['/login'], 
          queryParams: 
            redirectUrl
          
        
      )
    );
    return false;
  

- app.module.ts

-服务

import  BrowserModule  from '@angular/platform-browser';
import  NgModule, Component  from '@angular/core';
import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  LoginComponent, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin, DialogOverviewExampleDialog  from './Component/login/login.component';
import  RouterModule, ROUTES, Routes, ActivatedRouteSnapshot  from '@angular/router';
import  HttpClientModule, HttpClient, HttpRequest  from '@angular/common/http';
import  FormsModule  from '@angular/forms';
import  StoreComponent  from './Component/store/store.component';
import  NAVComponent  from './Component/nav/nav.component';
import  MatDialogModule, MatDialogRef  from '@angular/material';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  NeedAuthGuard  from './Service/service-t.service';
const Router: Routes = [
   path: "Login", component: LoginComponent, data:  requiresLogin: true  ,
   path: "Store", component: StoreComponent, data:  requiresLogin: true  ,
   path: '**', component: LoginComponent 
]
@NgModule(
  declarations: [
    AppComponent,
    LoginComponent,
    StoreComponent,
    NAVComponent,
    DialogOverviewExampleDialog,
    DialogOverviewExampleDialogPassword,
    DialogOverviewExampleDialogLogin,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(Router)
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DialogOverviewExampleDialog, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin]

)
export class AppModule  

登录组件

从'@angular/core'导入组件，OnInit，ViewChild，AfterViewInit，注入，可注入； 从'../../Service/service-t.service'导入ServiceTService； 从'@angular/router'导入RouterModule、Router、ActivatedRouteSnapshot、RouterStateSnapshot； 从'@angular/core'导入指令，ElementRef，输入； 从'rxjs'导入 Observable, Subject ； 从'@angular/router/src/utils/preactivation'导入 CanActivate ； 从 'src/app/app.component' 导入 AppComponent ； 从'../store/store.component'导入StoreComponent； 从'@angular/material'导入 MatDialog，MatDialogRef，MAT_DIALOG_DATA，MatDialogModule ； 从'@angular/animations'导入状态；

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
)  

export class LoginComponent implements OnInit   
  users: any =  
    id: "",
    Email:"",
    Password:"", 
    requiresLogin: false
  ;
  UserIsLogin:boolean = false; 
  constructor(
    private service: ServiceTService,
    private routerT : Router,
    private dialog: MatDialog
  )     
  
  isLogin( Login) :boolean 
    this.UserIsLogin= Login;
    return this.UserIsLogin; 
  
  onSubmit( userLogin) 
     this.service.getUser().subscribe( (result: any) => 
       if(userLogin.Email=="") this.dialog.open(DialogOverviewExampleDialog, width: '350px' )  
       if(userLogin.Password=='')this.dialog.open(DialogOverviewExampleDialogPassword, width: '350px')
       for (let users of result)
         if( users.Email == userLogin.Email && users.Password == userLogin.Password )
            alert("currect"); 
           this.isLogin(true);
           return this.routerT.navigate(['/Store']);
           else 
                  this.dialog.open(DialogOverviewExampleDialogLogin, width: '350px')
                  this.isLogin(false);
                  return false; 
                
        );
  
  ngOnInit() 
  


@Component(
  selector: 'DialogOverviewExampleDialog',
  templateUrl: 'dialog-Error.html'
)
export class DialogOverviewExampleDialog 

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) 

  onNoClick(): void 
    this.dialogRef.close();
  


@Component(
  selector: 'DialogOverviewExampleDialogPassword',
  templateUrl: 'dialog-Password.html'
)
export class DialogOverviewExampleDialogPassword 

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialogPassword>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) 

  onNoClick(): void 
    this.dialogRef.close();
  


@Component(
  selector: 'DialogOverviewExampleDialogLogin',
  templateUrl: 'dialog-incorrectLogin.html'
)
export class DialogOverviewExampleDialogLogin 

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialogLogin>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) 

  onNoClick(): void 
    this.dialogRef.close();
  

【参考方案1】：

我猜你是从错误的路径导入的。不要尝试以这种方式导入CanActivate：

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

但是：

import  CanActivate  from '@angular/router';

这样您的导入看起来如下

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