如何在前端react jsx文件中调用后端api-解网

问：

目前我正在使用 React、Node、Express 和 Mysql 开发 CRUD 应用程序，我是新手我面临的问题是我有一个会话 JWT 令牌，该令牌从后端获取并存储在会话中。但我没有了解如何将其作为标头通过所有请求传递到后端以对其进行验证到目前为止，我还有大约 30-40 个 API 链接，我直接调用了这些链接例如： const response = await axios.post（， { ...数据 });http://localhost:4000/confirm/${Id}

我知道像这样直接调用 API 是一种不好的做法，但我不知道在哪里存储它们并通过将会话 ID 连同它一起传递到后端来正确调用它们

我试图将 API 放入 .env 文件，但不知道如何通过它传递动态 url 变量

reactjs node.js axios dotenv

axios.js

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL, // Set your base URL in your .env file
});

instance.interceptors.request.use(
  (config) => {
    const token = sessionStorage.getItem('jwtToken'); // Get your JWT token from session storage or wherever you store it

    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

在您的组件中：

import axios from './axios'; // Import the Axios instance

async function fetchData(Id, data) {
  try {
    const response = await axios.post(`/confirm/${Id}`, data);
    // Handle the response
  } catch (error) {
    // Handle errors
  }
}

不要忘记在 env 文件中初始化 env var：

REACT_APP_API_BASE_URL=http://localhost:4000

0赞 javlocan.dev 11/2/2023 #2

我不是这里的专家（这是我在 StackOverflow 中的第一个答案），但也许我可以从我使用 NextAuth 的经验中指出一些东西，并且我自己在正确处理身份验证方面遇到了很多问题。

我猜你是在尝试制作受保护的路线。我真的不知道如何正确地做到这一点，但让我问你一些事情，因为如果它符合你的需求，那就容易多了！

我所做的是，我在前端对用户是否经过身份验证有不同的交互可能性。我所做的唯一验证是在登录时，然后将令牌存储在浏览器中，并为经过身份验证/未经过身份验证的不同前端提供服务。事实上，我的应用程序中未经身份验证的用户（也就是浏览器中的令牌）只能访问登录/注册页面。通过身份验证后，您可以在提取之前在客户端中进行检查。这符合您的需求吗？

我想你仍然可以用查询手写网址，但要以这种方式被黑客入侵，这个人应该拥有你的其他用户会话ID。我不认为我在这里提供了一个完整的解决方案，正如我所说，我最终使用了 NextAuth。

我希望我至少对您有所帮助！

更新：看到发布的答案，我认为它做得差不多，可能更好。但它并没有回答您关于服务器端验证的问题。但也许我没有完全理解代码。

如何在前端react jsx文件中调用后端api

How to call the backend api in the front end react jsx file

评论

评论