7

我正在使用角度 CanActivate Authguard 接口来保护我的组件。

@Injectable()
export class AuthGuard implements CanActivate{

constructor(private router: Router, private authService: AuthenticationService) {}

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

    this.authService.isLoggedIn.take(1).map((isLoggedIn : boolean) => {

        if(!isLoggedIn){
            this.router.navigate(['/login']);
            return false;
        }

        return true;
    })

    this.router.navigate(['/login']);
    return false;
   }
}

我像这样将它添加到我的路由器配置中。

const appRoutes: Routes = [
{path : '',redirectTo : 'login',pathMatch : 'full'},
{ path: 'home', component: HomeComponent,canActivate : [AuthGuard] }
]

我还将它添加到提供者数组中。

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [AuthGuard,  
ExpenseService,SellDetailService,AuthenticationService],
styleUrls: ['./app.component.css']
})

但是当我运行应用程序时，它会出现以下错误

StaticInjectorError(AppModule)[AuthGuard]:
StaticInjectorError(Platform: core)[AuthGuard]: NullInjectorError: No provider for AuthGuard！

我想我正确地实施了它，但它不起作用。我做错了什么？？？

4

6 回答 6

36

您应该将警卫的名称添加到提供程序数组中的 app.module 类似这样的东西

提供者：[AuthGuard]

于 2018-09-27T20:00:43.417 回答
4

您需要包含AuthGuard到提供者的数组中app.module.ts

import { AuthGuard } from './_guards/auth.guard'; //<-------

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    LoginComponent,   
  ],
  imports: [   
    MatTableModule,
    EditorModule,    
  ],
  providers: [    
    AuthGuard, // <------------ Include here
    ProfileResolver    
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

于 2020-10-27T18:00:54.430 回答
3

在 app.module.ts 文件中添加以下内容：

提供者：[AuthGuard]

于 2019-06-30T13:36:22.673 回答
3

您看到的问题是您的组件中提供了 AuthGuard，但是，它需要在更高级别提供。在您的情况下，路由模块。该staticInjector错误是让您知道 Angular 找不到 AuthGuard。

正如其他人所提到的，您有两种可用的解决方案。

选项1：

在应用程序模块或您在模块之间共享的另一个模块中提供您的 AuthGuard。例如，它可能看起来像这样。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from 'src/app/core/auth.guard';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  declarations: [
    AppComponent,
  ],
  providers: [
    AuthGuard // ADDED so AuthGuard can be accessed in any routing module.
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

选项 2

这是我对 AuthGuard 的首选方法，因为它们很可能是单例。您只需要添加到@Injectable()decorator { providedIn: 'root' }。这看起来像：

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

@Injectable({
  providedIn: 'root' // ADDED providedIn root here.
})
export class AuthGuard implements CanActivate {


  constructor() { }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return true; // AUTH LOGIC HERE.
  }

}

提示：您会注意到，如果您从 CLI 生成服务，它将具有{ providedIn: 'root' }但创建 Guard 不会。

于 2020-04-24T14:26:36.960 回答
2

您应该AuthGuard在提供程序中添加到 app.module

Providers:[AuthGuard]

应用程序模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from 'src/app/core/auth.guard';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  declarations: [
    AppComponent,
  ],
  providers: [AuthGuard], // Add AuthGuard here
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2020-05-30T19:27:55.353 回答
1

在 AuthGuard 的 @Injectable() 中添加：{ providedIn: 'root' }

于 2020-03-18T16:46:45.607 回答