Question

我想在我的Angular 6项目之一中使用RoleGuard服务。我已经在“ role-guard.service.ts”文件夹下创建了文件“'_guards”。现在，在路由文件中，我已声明与下面相同的内容，并尝试实现相同的内容。请注意，我有一个共享模块，并且没有在导出中声明roleguardservice。

import { RoleGuardService } from '../../_guards/role-guard.service';
const routes: Routes = [
    { path: 'edit-account-info', component: EditAccountInfoComponent, canActivate: [RoleGuardService] },
    ....
    ....
    ]
}

下面是我的app.module.ts file：

import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
....
....
exports : [
    // 
  ],
  providers: [AuthGuard, DisableAuthGuard, {
    provide: RECAPTCHA_SETTINGS,
    useValue: {
      siteKey: environment.recaptchasiteKey,
    } as RecaptchaSettings,
  }]

我要更改路线取决于用户角色。像，如果用户角色类型为1，则他将重定向至“ edit-account-info”，否则（如果用户角色类型为2），则将重定向至“ agent / edit-account-info”。如果用户角色类型2要访问路径“ edit-account-info”，则他将转到“取消授权”页面。

但是要实现它，当我想访问“ edit-account-info”页面时，它会向我显示错误：

未捕获（承诺）：错误：StaticInjectorError（AppModule）[RoleGuardService]： StaticInjectorError（平台：核心）[RoleGuardService]： NullInjectorError：没有RoleGuardService提供程序！错误：StaticInjectorError（AppModule）[RoleGuardService]： StaticInjectorError（平台：核心）[RoleGuardService]： NullInjectorError：没有RoleGuardService提供程序！ ... ....

下面是role-guard.sevice.ts文件的内容：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
//import { AuthGuard } from './auth.guard';
import { CommonService } from './../services/common.service';
import { AuthGuard, DisableAuthGuard} from './auth.guard';

@Injectable()
export class RoleGuardService implements CanActivate {
  private userDetails: any;
  public user_salt: any;
  public roleName: any;

  constructor(
    //public auth: AuthService, 
    public router: Router,
    private commService: CommonService,
    private location: Location,
    ) {

    }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    this.userDetails = this.commService.getSession('user');
    this.user_salt = this.commService.getSession('user_salt');
    const resultStorage = JSON.parse(this.commService.localstorageDecryption(this.userDetails, this.user_salt, 'N'));

    if (this.roleName === resultStorage.type) {
      return true;
    }

    // navigate to not found page
    this.router.navigate(['/404']);
    return false;
  }

}

Answer 1

您必须在import中Location服务并app.module.ts，然后将其添加到providers数组中，如下所示。

   import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
   import { RoleGuardService } from '../../_guards/role-guard.service';     
   import { AuthGuard, DisableAuthGuard} from '../../_guards/auth.guard';
    ....
    ....
    exports : [
        // 
      ],
      providers: [AuthGuard, RoleGuardService, 
        Location, {provide: LocationStrategy, useClass: PathLocationStrategy}
        DisableAuthGuard, {
        provide: RECAPTCHA_SETTINGS,
        useValue: {
          siteKey: environment.recaptchasiteKey,
        } as RecaptchaSettings,
      }]

希望这会有所帮助！

Answer 2

初始错误是由于未将RoleGuardService添加到您的providers中引起的。

@NgModule({
  ...
  providers: [AuthGuard, DisableAuthGuard, RoleGuardService, {
    provide: RECAPTCHA_SETTINGS,
    useValue: {
      siteKey: environment.recaptchasiteKey,
    } as RecaptchaSettings,
  }]
  ...
})

随后的错误与RoleGuardService中的注入有关。您的private location: Location中有constructor，但是没有Angular位置的导入语句。

import { Location } from '@angular/common';

Answer 3

您需要在app.module.ts

中添加 RoleGuardService

这是示例：

 从'../../_guards/auth.guard'导入{AuthGuard，DisableAuthGuard};
@NgModule（{
提供者：[
...
RoleGuardService
]，
进口：[
...
]
}
}）

Answer 4

根据上述答案，在提供商下列出RoleGuardService，并且如果此服务是从另一个模块提供的，并且您想在AppModule中使用它，请确保也将该模块导入AppModule。

角度6：未捕获（承诺）：错误：StaticInjectorError（AppModule）[RoleGuardService]

4 个答案: