登录页面在浏览器中不起作用，但该方法适用于邮递员

Question

我的angular项目中登录组件有问题，因为它不会加载登录页面，但会显示以下内容：HTTP ERROR 401

当我尝试使用Postman登录时，它运行得很好，所以我不明白为什么它会有这种行为，因为我在控制台或浏览器Postman状态中没有收到任何错误。这是我的登录组件。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
});
});
}
}

我的登录服务：

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

登录组件.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>

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((控制器中的代码后开始发生的。在此之前，它不会识别凭据，但页面显示正确，相反，它无法与Postman一起工作。现在，它返回200 Ok with Postman，但页面不会加载。有没有人遇到过类似的问题，可能知道原因？任何帮助都将不胜感激！顺致敬意，

更新：这是我在浏览器控制台上遇到的错误：浏览器控制台错误

Answer 1

我想说您的登录中有一条错误的路线。service:

login(email, password) {
return this.http.post<any>(this.ApiUrl + '/login/login', { email, password}, this.httpOptions
)

不是用"/login"代替"/login/login"吗？