首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >登录后的StaticInjectorError(AppModule)[AuthGuard]

登录后的StaticInjectorError(AppModule)[AuthGuard]
EN

Stack Overflow用户
提问于 2018-12-14 06:01:57
回答 1查看 4.4K关注 0票数 2

在使用ASP.NET核心应用程序登录到Angular应用程序后,我得到了以下错误

错误:未捕获(在promise中):错误: StaticInjectorError(AppModule) AuthGuard : StaticInjectorError(Platform: core)AuthGuard: NullInjectorError:没有AuthGuard的提供程序!

login.component.ts

代码语言:javascript
复制
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

代码语言:javascript
复制
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');
    }
}

EmployeeController

代码语言:javascript
复制
[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

代码语言:javascript
复制
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

代码语言:javascript
复制
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;
    }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-14 06:15:34

尝试将其添加到您的AuthGuard

代码语言:javascript
复制
@Injectable({providedIn: "root"})

或在此处指定您的身份验证保护服务的确切位置

代码语言:javascript
复制
import { AuthGuard } from './_guards';
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53770708

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档