У меня есть проблема в моем angular проекте с компонентом входа в систему, так как он не загружает страницу входа, но вместо этого он покажет это: ОШИБКА HTTP 401
Когда я попробуйте войти в систему с помощью Почтальона, он работает отлично, поэтому я не понимаю, почему у него такое поведение, так как я не получаю никакой ошибки в консоли или браузере Статус почтальона . Это мой login.component .ts:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LoginService } from '../services/login.service';
import { first } from 'rxjs/operators';
import {ToastrManager} from 'ng6-toastr-notifications';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
loading = false;
submitted = false;
constructor(private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private loginService: LoginService,
public toast: ToastrManager, ) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required]
});
}
get loginFormControl() {return this.loginForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.loginForm.invalid) {
return;
}
this.loading = true;
this.loginService.login(this.loginFormControl.email.value, this.loginFormControl.password.value)
.pipe(first())
.subscribe(
() => {
this.toast.successToastr('Login succesfully');
this.router.navigate(['/']);
},
() => {
this.loading = false;
this.toast.errorToastr('Something went wrong');
this.loginForm.reset();
this.loginForm.setErrors({
invalidLogin: true
});
});
}
}
Мой логин.сервис.ts:
import { Injectable } from '@angular/core';
import {Register} from '../Models/register';
import { HttpClient, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class LoginService {
httpOptions = { headers: new HttpHeaders(
{ 'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer',
})
};
userData = new BehaviorSubject<Register>(new Register());
ApiUrl = 'https://localhost:5001';
constructor(private http: HttpClient, public router: Router) {
}
login(email, password) {
return this.http.post<any>(this.ApiUrl + '/login/login', { email, password}, this.httpOptions
)
.pipe(map(response => {
localStorage.setItem('authToken', response.token);
this.setUserDetails();
return response;
}));
}
GetById(id) {
return this.http.post(this.ApiUrl + '/register/' + id , this.httpOptions);
}
doLogout() {
const removeToken = localStorage.removeItem('access_token');
if (removeToken == null) {
this.router.navigate(['/login']);
}
}
// User profile
setUserDetails() {
if (localStorage.getItem('authToken')) {
const userDetails = new Register();
const decodeUserDetails = JSON.parse(window.atob(localStorage.getItem('authToken').split('.')[1]));
userDetails.email = decodeUserDetails.sub;
userDetails.name = decodeUserDetails.name;
userDetails.isLoggedIn = true;
userDetails.role = decodeUserDetails.role;
this.userData.next(userDetails);
}
}
handleError(error: HttpErrorResponse) {
let msg = '';
if (error.error instanceof ErrorEvent) {
// client-side error
msg = error.error.message;
} else {
// server-side error
msg = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
return throwError(msg);
}
}
компонент login.com. html:
<div class="col-md-6 offset-md-3 mt-5">
<div *ngIf="loginForm.errors?.invalidLogin" class="alert alert-danger mt-3 mb-0">
Email or Password is incorrect.
</div>
<div class="card">
<div class="card-body">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="email">Email</label>
<input type="text" formControlName="email" class="form-control" autofocus
[ngClass]="{ 'is-invalid': submitted && loginFormControl.email.errors }" />
<div *ngIf="submitted && loginFormControl.email.errors" class="invalid-feedback">
<div *ngIf="loginFormControl.email.errors.required">Email is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control"
[ngClass]="{ 'is-invalid': submitted && loginFormControl.password.errors }" />
<div *ngIf="submitted && loginFormControl.password.errors" class="invalid-feedback">
<div *ngIf="loginFormControl.password.errors.required">Password is required</div>
</div>
</div>
<button [disabled]="loading" class="btn btn-primary">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Login
</button>
</form>
</div>
</div>
</div>
The LoginController.cs:
using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using System.Security.Claims;
using System.Text;
using AnotherAP.Helpers;
using AnotherAP.Models;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.IdentityModel.Tokens;
// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
namespace AnotherAP.Controllers
{
[EnableCors("CorsPolicy")]
[Authorize]
[ApiController]
[Produces("application/json")]
[Route("[controller]")]
public class LoginController : ControllerBase
{
private readonly IConfiguration _config;
private readonly DataContext _context;
public LoginController(IConfiguration config,DataContext context)
{
_context = context;
_config = config;
}
[AllowAnonymous]
[HttpPost]
[Route("login")]
public IActionResult Login([FromBody] Register model)
{
IActionResult response = Unauthorized();
Register user = AuthenticateUser(model.Email,model.Password);
if (user != null)
{
var tokenString = GenerateJWT(user);
response = Ok(new
{
token = tokenString,
userDetails = user,
});
}
return response;
}
string GenerateJWT(Register user)
{
var securityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config["Jwt:SecretKey"]));
var credentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256);
var claims = new[]
{
new Claim(JwtRegisteredClaimNames.Sub, user.Email),
new Claim("Name", user.Name.ToString()),
new Claim("role",user.Role),
new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
};
var token = new JwtSecurityToken(
issuer: _config["Jwt:Issuer"],
audience: _config["Jwt:Audience"],
claims: claims,
expires: DateTime.Now.AddMinutes(30),
signingCredentials: credentials
);
return new JwtSecurityTokenHandler().WriteToken(token);
}
public Register AuthenticateUser(string email,string password)
{
if (string.IsNullOrEmpty(email) || string.IsNullOrEmpty(password))
return null;
var user = _context.register.FirstOrDefault(x => x.Email == email && x.Password==password);
// check if username exists
if (user == null)
return null;
return user;
}
}
}
Такое поведение началось после того, как я изменил код в контроллере для AutheticateUser (), используя контекст данных вместо объявления списка. До этого он не распознавал учетные данные, но страница отображалась правильно, вместо этого он не работал бы с почтальоном. Теперь он возвращает 200 нормально с почтальоном, но страница не загружается. Кто-нибудь сталкивался с подобной проблемой и мог бы знать причину? Буду признателен за любую помощь! С уважением!
ОБНОВЛЕНИЕ: Это ошибка, которую я получаю из консоли браузера: Ошибка консоли браузера