在 Angular 中实现 JWT 访问令牌后从 API 获取列表时出现 401 错误

Getting 401 Error while fetching list from API after implementing JWT access token in Angular

在我的服务 .ts 文件中,我这样编码

getUsers(): Observable<any> {
    let httpOptions = new HttpHeaders().set('Authorization', 'Bearer ' + 
    this.securityService.securityObject.bearerToken);
    return this.http.get(environment.baseApiUrl + "user", { headers: httpOptions });
}

在 bearerToken 中我们有 token 值,但是在 httpOptions 中显示的 headers 如下图所示。 (取自控制台)

在我的控制器中class我有

    [HttpGet]
    [Authorize]
    public async Task<IActionResult> Get()
    {

在我的 HttpInterceptor 中,我这样写

  var token = localStorage.getItem("bearerToken");

  if (token) {
  const newReq = request.clone(
    {
      headers: request.headers
        .set('Authorization',
          'Bearer ' + token)
    });

  return next.handle(newReq);
}
else {
  return next.handle(request);
}

我的本地存储有我的令牌值,但是

当我调试代码时,我看到它没有进入 clone,这就是 headers 没有像我的图像那样的任何条目的原因。克隆可以在那里使用吗?

我用同样的方式,我不认为这是问题所在,但我认为你在调用 get user 时也不需要设置

import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { AuthenticationService } from './authentication.service';

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {

    constructor(private injector: Injector) { }

    token:string;

    intercept(req, next) {
        const authService = this.injector.get(AuthenticationService);

        this.token = authService.getToken();

        const authRequest = req.clone({
            headers: req.headers.set('Authorization', 'Bearer ' + this.token) 
        });

        return next.handle(authRequest);
    }
}

如果你查看工具网络,它已经从拦截器中设置 只有:

getUsers(): Observable<any> {
    return this.http.get(environment.baseApiUrl + "user")
}

这些是导致我出现问题的主要原因

  1. 像corsaro提到的拦截器会处理我们的http请求不需要单独提及

  2. 在我以前使用的 startup.cs 文件中

    app.UseAuthorization();
    app.UseAuthentication();
    

我把它的顺序换成了

   app.UseAuthentication();
   app.UseAuthorization();
  1. 在我的拦截器 class 中,我修改了 header 部分

     headers: new HttpHeaders({
         'Content-Type': 'application/json',
         'Authorization':'Bearer ' + token
       }) 
    
  2. 将appsettings.json文件中声明的JwtSettings复制到appsettings.development.json文件进行本地调试

进行这些更改后现在可以正常工作了:)