因此,我目前正在进行一个我想做的项目,基本上是一个食品商店项目。问题是我有用户会将产品添加到他/她的购物车中并购买。我还有一个管理员,它将添加/删除/更改产品/用户。所以最主要的是,当我在邮递员中测试API时-它没有问题,我认为问题出在前端,因为当我在google中打开控制台时,它显示401错误。这是我的拦截器和警卫的代码。并且还使用角色(用户/管理员)进行身份验证。
拦截器:
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
}
}
}
如果您的api与邮递员运行良好,则应使用相同的授权标头复制请求,也许您没有正确传递令牌甚至生成令牌。您可以尝试这样的请求。
return this.http.get<Something[]>(url, {
headers: new HttpHeaders().set('Authorization',
`bearer ${access_token}`).set('Content-Type', 'application/json')
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句