选项1：

Question

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

deparse

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

@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;
   }
}

我还将它添加到providers数组中。

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

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

StaticInjectorError（的AppModule）[AuthGuard]：
StaticInjectorError（Platform：core）[AuthGuard]：NullInjectorError：No AuthGuard提供商！

我认为我是以正确方式实施的，但它不起作用。我做错了什么???

Answer 1

您应将卫队的名称添加到providers数组中的app.module中像这样

提供者：[AuthGuard]

Answer 2

您需要将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 {}

Answer 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的首选方法，因为它们很可能是singleton。您只需要添加到@Injectable()装饰器{ 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。

Answer 4

您应将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 { }

Answer 5

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

提供者：[ AuthGuard ]

Answer 6

写： { providerIn：'root' } 在AuthGuard的@Injectable（）内部

Angular AuthGuard无法正常工作

6 个答案:

选项1：

选项2