0

我正在尝试将 reactjs 仪表板放在一起并将其与 Nodejs 后端连接起来。我目前正在尝试验证 jwt 令牌。当我使用 Postman 应用程序执行此操作时,它工作正常。但是当我使用我的 reactjs 表单尝试它时,它没有发生。请帮我在我的代码中找到问题。我不是经验丰富的开发人员。我是 nodejs 和 reactjs 的新手。任何帮助将不胜感激。我将尝试在下面发布所有相关代码和一些快照。

//reactjs code calling this function on a button submit
 //verify user

  onVerify = event => {
    let databody = localStorage.getItem("jwtToken");
    event.preventDefault();
    console.log(databody);
    fetch("http://localhost:8000/api/auth/me", {
      method: "get",
      headers: {
        "x-access-token": databody
      }
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error("Something went wrong with your fetch");
        }
      })
      .then(json => {
        console.log(json.token);
      });
  };

Nodejs express 后端代码

//app.js
var express = require("express");

var db = require("./db");
var Cors = require("cors");

var app = express();

app.use(Cors());

var UserController = require("./user/UserController");
app.use("/users", UserController);

var AuthController = require("./auth/AuthController");
app.use("/api/auth", AuthController);

var WorkInvenController = require("./auth/WorkInvenController");
app.use("/api/workinven", WorkInvenController);

module.exports = app;

//AuthController.js


router.get("/me", function(req, res) {
  console.log(req.headers);
  var token = req.headers["x-access-token"];
  if (!token)
    return res.status(401).send({ auth: false, message: "No token provided." });

  jwt.verify(token, process.env.secret, function(err, decoded) {
    if (err)
      return res
        .status(500)
        .send({ auth: false, message: "Failed to authenticate token." });

    User.findById(decoded.id, { password: 0 }, function(err, user) {
      if (err)
        return res.status(500).send("There was a problem finding the user.");
      if (!user) return res.status(404).send("No user found.");

      res.status(200).send(user);
    });
  });
});

使用 Postman 发布时来自后端的终端输出

在此处输入图像描述

使用来自的 reactjs 发布时来自后端的终端输出

在此处输入图像描述

下面附上浏览器错误 在此处输入图像描述

4

2 回答 2

0

我可以看到它是一个“拒绝错误”

您可以添加.catch()并处理正在引发的错误。

onVerify = event => {
    let databody = localStorage.getItem("jwtToken");
    event.preventDefault();
    console.log(databody);
    fetch("http://localhost:8000/api/auth/me", {
      method: "get",
      headers: {
        "x-access-token": databody
      }
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error("Something went wrong with your fetch");
        }
      })
      .then(json => {
        console.log(json.token);
      }).catch(error=>{
     //handle the error in here may be
        console.log(error)
     });
  };

有时我们也编写了某种包装器来处理错误:

fetch(<url>, {
      <headers>,
     <options>
    })
      .then(this._checkStatus)
      .then(response => response.json());

 _checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
      // Success status lies between 200 to 300
      return response;
    }  else {
//here handle the error may be.
      var error = new Error(response.statusText);
      console.log(error);
    }
  }

因此,在您的情况下,当错误出现未处理时,由于未找到 .catch ,因此会引发未处理的拒绝错误。您可以查看上述方法并遵循其中任何一种方法,如果您仍然面临此问题,请告诉我。

于 2019-04-27T05:25:33.560 回答
0

抱歉,我没有在这里发布整个代码,否则我相信你们很久以前就会想到它。长话短说..问题出在我的令牌上,我不小心将 expiresIn 设置为 60,认为它是 60 分钟而不是 60 * 60。所以令牌每隔一分钟就会过期。

现在将令牌到期设置为“24 小时”后,一切似乎都运行良好.. 非常感谢你们的帮助。

于 2019-04-30T08:12:59.757 回答