ReactJS - 如何从 Node js API 获取经过身份验证的用户数据？

Question

所以我已经使用 Postman 测试了我的 API 路由 /getUser，它正在成功接收以 json 格式接收的数据。但是，存储在本地存储中并过去在标头中的 Jwt 令牌没有得到验证，因为在我的浏览器中我收到“访问被拒绝。 No JWT provided' 发送 401 状态。

Nodejs API 在这下面，包括我的身份验证路由和/getUserwhich 用户在下面找到的中间件文件也验证了令牌

const express = require('express');
const users = express.Router();
const cors = require('cors');
const moment = require('moment');
const jwt = require('jsonwebtoken');
// var exjwt = require('express-jwt');
const auth = require('../middleware/auth');
const bcrypt = require('bcrypt');
const Sequelize = require('sequelize');
const bodyParser = require('body-parser');
const User = require('../models/User');

const config = require('config');

// const secret = 'dassdfdd';

users.use(
  bodyParser.urlencoded({
    extended: false
  })
);

users.use(bodyParser.json());

users.use(cors());

users.post('/authenticate', (req, res) => {
  User.findOne({
    where: {
      email: req.body.email
    }
  }).then(user => {
    if (user) {
      if (bcrypt.compareSync(req.body.password, user.password)) {
        const payload = {
          id: user.id,
          name: user.first_name
        };
        var token = jwt.sign(payload, config.get('secret'), {
          expiresIn: 1440 // expires in 24 hours
        });

        // res.cookie('auth', token);
        res.cookie('jwt', token, { httpOnly: true, secure: true });
        // return the information including token as JSON
        // // res.setHeader('token', token);
        // res.setHeader('Authorization', 'Bearer ' + token);
        res.send({
          message: 'authentication done ',
          token: token,
          user: user.toJSON()
        });

        console.log(token);
        console.log('Successful Login');
        console.log(user.first_name);
      } else {
        res.json({ message: 'please check your password !' });
        console.log('incorrect password');
      }
    } else {
      res.json({ message: 'user not found !' });
      console.log('user cannot be found');
    }
  });
});

users.get('/protected', (req, res) => {
  res.send('protected');
});


users.get('/getUser', auth, function(req, res) {
  // const currentUser = req.;
  // const id = parseInt(req.params.id);

  const users = User.findOne({
    where: { id: req.user.id }
  });
  //   }
  // });
  // if (!users) {
  //   return res.status(404).send('Cannot find your team players');
  // }
  console;
  res.status(200).json(users);
});


module.exports = users;

登录组件

import React, { Component } from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';

    class Login extends Component {
      constructor() {
        super();
        this.state = {
          email: '',
          password: '',
          errors: {}
        };

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
      }

      onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
      }
      onSubmit(e) {
        e.preventDefault();

        // const user = {
        //   email: this.state.email,
        //   password: this.state.password
        // };

        axios
          .post('http://localhost:5000/api/authenticate', {
            email: this.state.email,
            password: this.state.password
          })
          .then(res => {
            localStorage.setItem('token', res.data.token);
            this.props.history.push('/Profile');
          });
      }

auth.js 这是我的中间件文件

const jwt = require('jsonwebtoken');
const config = require('config');

module.exports = function(req, res, next) {
  const token = req.header('Authorization');

  if (!token) {
    return res.status(401).send('Access denied. No JWT provided.');
  }

  try {
    const decoded = jwt.verify(token, config.get('secret'));
    res.set('Authorization', token);
    req.user = decoded;

    next();
  } catch (ex) {
    res.status(400).send('Invalid JWT.');
  }
};

配置文件组件（这是页面，我希望用户数据出现）

import React, { Component } from 'react';
import { getJwt } from '../helpers/jwt';
import axios from 'axios';
import { withRouter } from 'react-router-dom';

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // users: []
    };
  }

  componentDidMount() {
    const jwt = getJwt();
    if (!jwt) {
      this.props.history.push('/Login');
    }


axios
  .get('http://localhost:5000/api/getUser', {
    headers: { Authorization: `Bearer ${jwt}` }
  })
  .then(res => {
    this.profile = res.data;
    console.log('profile is:', res.data);
  })
  .catch(error => console.log(error));

}

Answer 1

在您的auth.js middleware 文件中，您有const token = req.header('Authorization');。这包括不属于 JWT 本身的 Bearer 前缀，需要在 JWT 库解析令牌之前将其删除。

Bearer 前缀将令牌类型标识为Bearer token under the OAuth 2.0 Authorization Framework。如果您希望支持其他令牌类型，则前缀将不同以标识相应的类型和框架。