c# - StaticInjectorError(AppModule)[AuthGuard] 登录后

Question

使用 ASP.NET Core API 应用程序登录到 Angular 应用程序后，出现以下错误

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AuthGuard]: StaticInjectorError(Platform: core)[AuthGuard]: NullInjectorError: No provider for AuthGuard!

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { routerTransition } from '../router.animations';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { first } from 'rxjs/operators';

import { AlertService, AuthenticationService } from '../_services';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    animations: [routerTransition()]
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    loading = false;
    submitted = false;
    returnUrl: string;

    constructor(private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) {}

    ngOnInit() {
        this.loginForm = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });

        // reset login status
        this.authenticationService.logout();

        // get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    // convenience getter for easy access to form fields
    get f() { return this.loginForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.loginForm.invalid) {
            return;
        }

        this.loading = true;
        this.authenticationService.login(this.f.username.value, this.f.password.value)
            .pipe(first())
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

AuthenticationService.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthenticationService {
    constructor(private http: HttpClient) { }

    login(username: string, password: string) {
      return this.http.post<any> 
(`http://localhost:5000/api/employee/authenticate`, { UserName: username, 
Password: password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to 
keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }

                return user;
            }));
    }

    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
    }
}

雇员 Controller

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class EmployeeController : ControllerBase
{
    private IEmployeeService _employeeService;
    private IMapper _mapper;
    private readonly AppSettings _appSettings;

    public EmployeeController(
        IEmployeeService employeeService,
        IMapper mapper,
        IOptions<AppSettings> appSettings)
    {
        _employeeService = employeeService;
        _mapper = mapper;
        _appSettings = appSettings.Value;
    }

    [AllowAnonymous]
    [HttpPost("authenticate")]
    public IActionResult Authenticate([FromBody]EmployeeDto employeeDto)
    {
        var employee = _employeeService.Authenticate(employeeDto.UserName, employeeDto.Password);

        if (employee == null)
            return BadRequest(new { message = "UserName or Password is incorrect" });

        var tokenHandler = new JwtSecurityTokenHandler();
        var key = Encoding.ASCII.GetBytes(_appSettings.Secret);
        var tokenDescriptor = new SecurityTokenDescriptor
        {
            Subject = new ClaimsIdentity(new Claim[]
            {
                new Claim(ClaimTypes.Name, employee.IdMyUser.ToString())
            }),
            Expires = DateTime.UtcNow.AddDays(7),
            SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
        };
        var token = tokenHandler.CreateToken(tokenDescriptor);
        var tokenString = tokenHandler.WriteToken(token);

        employee.IdMyUserNavigation = new MyUserService().GetById(employee.IdMyUser);

        // return basic employee info (without password) and token to store client side
        return Ok(new
        {
            Id = employee.IdMyUser,
            UserName = employee.UserName,
            FirstName = employee.IdMyUserNavigation.Fname,
            LastName = employee.IdMyUserNavigation.Lname,
            Token = tokenString
        });
    }

    /// <summary>
    ///     Get idCommune and creating and setting a list of contacts,
    ///     Creating the user and setting the forieng key to employee,
    ///     Add idPosition to the employee.
    ///     Save the Employee
    /// </summary>
    /// <param name="employeeDto">
    ///     MyUser{
    ///         Fname, Lname, rue,
    ///         CommuneDto{
    ///             Commune
    ///             WilayaDto{
    ///                 Wilaya
    ///             }
    ///         }
    ///         ContactsDtos:[ {ContactType, ContactInfo, IsPrimary} ... ]
    ///     }
    ///     UserName, Password, BirthDate, Salary,
    ///     PositionDto{
    ///         Posititon, BaseSalary
    ///     }
    /// </param>
    /// <returns>HTTP 200 OK(employee)</returns>
    [AllowAnonymous]
    [HttpPost("register")]
    public IActionResult Register([FromBody]EmployeeDto employeeDto)
    {
        // map dto to entity
        var employee = _mapper.Map<Employee>(employeeDto);
        var user = _mapper.Map<MyUser>(employeeDto.myUser);
        try
        {
            IMyUserService _myUserService = new MyUserService();
            IPositionService _positionService = new PositionService();
            ICommuneService _communeService = new CommuneService();

            // Set idCommune for the user.
            user.IdCommune = _communeService.GetByName(employeeDto.myUser.communeDto.Commune).IdCommune;

            // Set the list of Contacts for the user.
            foreach (var contactDto in employeeDto.myUser.ContactsDtos)
            {
                Contact contact = new Contact();
                contact.ContactInfo = contactDto.ContactInfo;
                contact.ContactType = contactDto.ContactType;
                contact.IsPrimary = contactDto.IsPrimary.ToString();
                user.Contact.Add(contact);
            }

            // Save the User.
            user = _myUserService.Create(user);

            // Set the idMyUser for the employee.
            employee.IdMyUser = user.IdMyUser;

            // Set the idPosition for the employee.
            employee.IdPosition = _positionService.GetByName(employeeDto.positionDto.Position).IdPosition;

            //Create and Save the employee
            var e = _employeeService.Create(employee, employeeDto.Password);

            // Return HTTP 200 OK requet with the employee JSON.  
            return Ok(e);
        }
        catch (AppException ex)
        {
            // return error message if there was an exception
            return BadRequest(new { message = ex.Message });
        }
    }

    [HttpGet]
    public IActionResult GetAll()
    {
        var employees = _employeeService.GetAll();
        var employeeDtos = _mapper.Map<IList<EmployeeDto>>(employees);
        return Ok(employeeDtos);
    }

    [HttpGet("{id}")]
    public IActionResult GetById(int id)
    {
        var employee = _employeeService.GetById(id);
        var employeeDto = _mapper.Map<EmployeeDto>(employee);
        return Ok(employeeDto);
    }

    [HttpPut("{id}")]
    public IActionResult Update(int id, [FromBody]EmployeeDto employeeDto)
    {
        // map dto to entity and set id
        var employee = _mapper.Map<Employee>(employeeDto);
        employee.IdMyUser = id;

        try
        {
            // save
            _employeeService.Update(employee, employeeDto.Password);
            return Ok();
        }
        catch (AppException ex)
        {
            // return error message if there was an exception
            return BadRequest(new { message = ex.Message });
        }
    }

    [HttpDelete("{id}")]
    public IActionResult Delete(int id)
    {
        _employeeService.Delete(id);
        return Ok();
    }
}

app.module.ts

import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AlertComponent } from './_directives';
import { AuthGuard } from './_guards';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AlertService, AuthenticationService, UserService } from './_services';


// AoT requires an exported function for factories
export const createTranslateLoader = (http: HttpClient) => {
    /* for development
    return new TranslateHttpLoader(
        http,
        '/start-angular/SB-Admin-BS4-Angular-6/master/dist/assets/i18n/',
        '.json'
    ); */
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
};

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [HttpClient]
            }
        }),
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        AlertComponent,
    ],
    providers: [
        AuthGuard,
        AlertService,
        AuthenticationService,
        UserService,
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

auth.guard.ts

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

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['login'], { queryParams: { returnUrl: state.url 
}});
        return false;
    }
}

Answer 1

尝试将此添加到您的 AuthGuard

@Injectable({providedIn: "root"})

或在此处指定您的 auth guard 服务的确切位置

import { AuthGuard } from './_guards';