在 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")
}
这些是导致我出现问题的主要原因
像corsaro提到的拦截器会处理我们的http请求不需要单独提及
在我以前使用的 startup.cs 文件中
app.UseAuthorization(); app.UseAuthentication();
我把它的顺序换成了
app.UseAuthentication();
app.UseAuthorization();
在我的拦截器 class 中,我修改了 header 部分
headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization':'Bearer ' + token })
将appsettings.json文件中声明的JwtSettings复制到appsettings.development.json文件进行本地调试
进行这些更改后现在可以正常工作了:)