Node.js http://localhost:3000/users/profile 401（未经授权）

我的代码在POSTMAN上运行良好，但当我在浏览器上尝试时，它会在控制台中显示此错误：

http://localhost:3000/users/profile 401 (Unauthorized)

我正在尝试使用PASSPORT JWT进行身份验证。 我的授权路径：

http://localhost:3000/users/profile

我的passport配置文件：

var JwtStrategy = require('passport-jwt').Strategy;
var ExtractJwt = require('passport-jwt').ExtractJwt;
const database = require("./database");
const User = require("../model/model");

module.exports = (passport) => {
var opts = {}
opts.jwtFromRequest = ExtractJwt.fromHeader("authorization");
opts.secretOrKey = database.secret;
// console.log(opts);
passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
    // console.log(jwt_payload);    
    User.findById(jwt_payload._id, function(err, user) {
        if (err) {
            return done(err, false);
        }
        if (user) {
            return done(null, user);
        } else {
            return done(null, false);
        }
    });
}));

}

我的令牌在此处创建（这是登录端点）：

获取用户配置文件的My passport路径（用户登录后）：

在此处提交表单和有效响应后，我的令牌将存储在本地存储器中：

authUserCredentials()
  {
    console.log(this.loginUser.value);
    var email = this.loginUser.value.email.toLowerCase().trim();
    var password = this.loginUser.value.password.trim();

    var loginUserData = {email, password};
    console.log(loginUserData);

    this.userServ.authUser(loginUserData).subscribe((data:any) => {
      if(!data.success){
        this.flashMsg.show("ERROR : "+ data.msg, {cssClass: 'flashMessageBox', timeout: 5000});
        this.router.navigate(['/']);
      }else{
        this.userServ.storeToken(data.token);
        this.flashMsg.show("SUCCESS : "+ data.msg, {cssClass: 'flashMessageBox', timeout: 5000});
        this.router.navigate(['user/profile']);
      }      
    })
  }

我的轮廓组件在角度：

ngOnInit() {
    this.userServ.getUserProfile().subscribe((data:any)=>{
      console.log(data);
      this.user = data.user;
      // console.log(data);      
    },err => {
      console.log(err);
      return false;
    });
  }

获取用户配置文件服务并存储令牌和获取令牌功能：

getUserProfile(){
    let header = new HttpHeaders();
    var token = this.getToken();
    // console.log(token); 
    header.append('Authorization', token);   
    header.append('Content-Type', 'application/json');    
    // console.log(header);
    return this.http.get('http://localhost:3000/users/profile', {headers: header}).map(res => {return res});
  }



  storeToken(token){
    localStorage.setItem('id_token', token);
  }


  getToken(){
    return localStorage.getItem('id_token');
  }

试试这个：

header.append('Authorization', `Bearer ${token}`);

---

像这样更改您的配置文件服务函数

header = header.append('Authorization', token);   
header =  header.append('Content-Type', 'application/json');

---

首先转到authinterceptor.ts 用上述代码替换现有代码

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
import { Router } from "@angular/router";
import { UserService } from "../user/user-services/user.service";




    @Injectable()
    export class AuthInterceptor implements HttpInterceptor {
    
        constructor(private userService : UserService,private router : Router){}
    
        intercept(req: HttpRequest<any>, next: HttpHandler) {
    
            if (req.headers.get('noauth'))
                return next.handle(req.clone());
            else {
                const clonedreq = req.clone({
                    headers: req.headers.set("Authorization", this.userService.loadToken())
                });
                return next.handle(clonedreq).pipe(
                    tap(
                        event => { },
                        err => {
                            if (err.error.auth == false) {
                                this.router.navigateByUrl('/login');
                            }
                        })
                );
            }
        }
    }

import{HttpInterceptor，HttpRequest，HttpHandler，HttpEvent}来自“@angular/common/http”；
从“@angular/core”导入{Injectable}；
从“rxjs/operators”导入{tap}；
从“@angular/Router”导入{Router}”；
从“./user/user-services/user.service”导入{UserService}；
@可注射（）
导出类AuthInterceptor实现HttpInterceptor{
构造函数（私有用户服务：用户服务，私有路由器：路由器）{}
拦截（请求：HttpRequest，下一步：HttpHandler）{
if（req.headers.get（'noauth'））
返回next.handle（req.clone（））；
否则{
const clonedreq=req.clone({
headers:req.headers.set（“授权”，this.userService.loadToken（））
});
返回next.handle（clonedreq）.pipe(
水龙头(
事件=>{}，
错误=>{
if（err.error.auth==false）{
this.router.navigateByUrl（'/login'）；
}
})
);
}
}
}

Hi。。很抱歉，登录成功后，我看不到您在何处调用storeToken（）方法…您是否尝试过：header.append（'Authorization Bearer'，token）；我想你需要在标题中使用“Bearer”。不，它不起作用。为什么它在postman上起作用，但在我尝试使用浏览器时不起作用。如果它在postman中起作用，则表示你的角代码没有正确提交post请求。您确定请求主体的格式是Passport所期望的正确JSON格式吗。即does console.log（loginUserData）；显示正确的JSON？

header = header.append('Authorization', token);   
header =  header.append('Content-Type', 'application/json');

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
import { Router } from "@angular/router";
import { UserService } from "../user/user-services/user.service";




    @Injectable()
    export class AuthInterceptor implements HttpInterceptor {
    
        constructor(private userService : UserService,private router : Router){}
    
        intercept(req: HttpRequest<any>, next: HttpHandler) {
    
            if (req.headers.get('noauth'))
                return next.handle(req.clone());
            else {
                const clonedreq = req.clone({
                    headers: req.headers.set("Authorization", this.userService.loadToken())
                });
                return next.handle(clonedreq).pipe(
                    tap(
                        event => { },
                        err => {
                            if (err.error.auth == false) {
                                this.router.navigateByUrl('/login');
                            }
                        })
                );
            }
        }
    }