JWT 未在 post 请求 401 错误 Angular 和 NodeJS 上发送

Question

我正在使用 JWT 创建一个 MEAN 堆栈，我的后端使用 nodeJS 与 postman 完美配合，现在当我尝试发送一个 post 请求时，我得到一个 401 语句（来自后端）我丢失了存储在本地存储中的令牌。也许我将令牌存储在本地存储上的近似是错误的？这是我的文件代码：

AuthService.ts

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  endpoint: String='http://localhost:8080/api';
  userToken: String;

  constructor(private http:HttpClient) {
    this.readToken();
   }

  logout(){

  }

  login(usuario: Usuario){
    const authData= {
      ...usuario
    }

    return this.http.post(`${this.endpoint}/auth/login`, authData)
      .pipe(map(resp =>{
        this.guardarToken(resp ['token'])
        return resp;
      })
      )
  }

  nuevoUser(usuario: Usuario){
    const authData= {
    ...usuario
  }

  return this.http.post(`${this.endpoint}/usuarios`, authData)
  .pipe(map( resp =>{
    this.guardarToken(resp['token'])
    return resp;
    })
    )
  }

  private guardarToken(xtoken:string){

    this.userToken = xtoken;
    localStorage.setItem('token',xtoken);
    //return JSON.parse(localStorage.getItem('token')|| '{}');

  }

  
  readToken(){
    
    if(localStorage.getItem('token') ){
      this.userToken = localStorage.getItem('token');
    }else{
      this.userToken = '';
    }

    return this.userToken
 
  }

}

ApiService.ts

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  apiToken = localStorage.getItem('token');
  //apiToken = this.auth.readToken();
  endpoint: string = 'http://localhost:8080/api';
  headers = new HttpHeaders().set('Content-Type', 'application/json')
                              .set('Authorization', `token ${this.apiToken}`); 

  

  constructor(private http:HttpClient, private auth:AuthService) { }

   // Add 
   AddCliente(cliente: Cliente): Observable<any> {
    let API_URL = `${this.endpoint}/clientes`;
    return this.http.post(API_URL, cliente, { headers: this.headers })
      .pipe(
        map((resp: any)=>{
          cliente._id = resp.nombre;
          return cliente;
        }),
        catchError(this.errorMgmt)
      )
  }
}
//more crud stuff

拦截器

@Injectable()
export class HttpConfigInterceptor implements HttpInterceptor {
    constructor(
        private router: Router,
        private auth: AuthService
      ) {}
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        console.log("Interception In Progress");  
        //const token: string = localStorage.getItem('token');
        const token = this.auth.readToken(); 
        request = request.clone({ headers: request.headers.set('Authorization', 'token ' + token) });  
        request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });  
        return next.handle(request)  
        .pipe(  
           catchError((error: HttpErrorResponse) => {  
                 
                if (error && error.status === 401) {  
                    console.log("ERROR 401 UNAUTHORIZED")  
                }  
                return throwError(()=>error);                      
           })  
        );  
  }
}

编辑：添加 headers

的图像

Answer 1

也许你忘了输入 app.module 这个：

  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: TokenInterceptor ,
    multi: true,
  }..

Answer 2

在检查了我的代码前后之后，我尝试在我的 nodejs 服务器的单独一行中添加授权，如下所示：

res.setHeader("Authorization","Bearer");

然后一切开始按预期工作，感谢大家的时间。

JWT 未在 post 请求 401 错误 Angular 和 NodeJS 上发送

JWT not being send on post request 401 error Angular and NodeJS

authentication

jwt

angular