Http://localhost:3000/users/profile 401(未经授权)

问题描述

我的代码在邮递员上运行正常，但当我在浏览器上尝试时，它在控制台中显示以下错误：

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);
        }
    });
}));

}

我的令牌在此创建(这是登录终结点)：

router.post('/authUserCredentials', (req, res, next)=>{
    var userCred = req.body;
    // console.log(userCred); 

    controllers.checkUserExist({email : req.body.email}, (err, data) => {
        if(err){
            controllers.failResponse(res, "Something went wrong. Please try again.");
        }else if(!data){
            controllers.failResponse(res, "You Are Not Registered. Please Register to Continue.");
        }else{
            var passMatch = controllers.comparePassword(userCred.password, data.password);
            // console.log(passMatch); 
            if(!passMatch){
                controllers.failResponse(res, "Invalid Email or Password. Please try again.");
            }else{
                var token = jwt.sign(data.toJSON(), database.secret, {expiresIn: 604800});
                res.json({
                    success: true,
                    msg: "Login Successful.",
                    token: token
                });
            }
        }
    });
});

我获取用户配置文件的护照路径(在用户登录后)：

router.get('/profile', passport.authenticate('jwt', { session: false }), (req, res, next) => {
    res.json({user: req.user});
}); 

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

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 = header.append('Authorization', token);   
header =  header.append('Content-Type', 'application/json');