ASP.. NET Core API / Angular语言 - 认证问题

Question

所以，我目前正在进行一个项目，我想做的，它基本上是一个食品商店项目。问题是，我有用户，将产品添加到他/她的购物车，并购买他们。此外，我有一个管理员将添加/删除/更改产品/用户。所以最重要的是，当我在postman中测试API时，它工作正常我认为问题出在前端，因为当我在google中打开控制台时它显示401错误。这是我的拦截器和守卫的代码。并且身份验证是使用角色(user/admin)进行的。

拦截:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from "@angular/core";
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private router: Router) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (localStorage.getItem('token') !== null) {
let request = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'))
})
return next.handle(request).pipe(
tap(
success => { },
error => {
if (error.status == 401) {
localStorage.clear()
this.router.navigateByUrl('/home')
} else {
localStorage.setItem('error', error)
}
}
)
)
} else {
return next.handle(req.clone())
}
}
}

警卫:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (localStorage.getItem('token') !== null) {
return true
} else {
this.router.navigateByUrl('/home')
return false
}
}
}

Answer 1

如果你的api与postman工作良好，你应该用相同的授权头复制请求，也许你没有正确传递令牌，甚至没有生成它。你可以试试这样的请求。

return this.http.get<Something[]>(url, {
headers: new HttpHeaders().set('Authorization',
`bearer ${access_token}`).set('Content-Type', 'application/json')
});