在React前端应用程序中安全存储API令牌的最佳实践？

Question

我在React应用程序中使用axios调用Pipedrive API，如下所示：

axios.post('https://api.pipedrive.com/v1/deals?api_token=123thisissometesttokenblablabla456', {
    name: "test",
    id: 1,
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});

由于这是一个前端应用程序，这种做法使得api_token=123thisissometesttokenblablabla456对任何使用浏览器开发工具查看源代码的人都是公开的，从而使他们能够完全访问我在Pipedrive中的数据。

有没有办法在前端应用程序中安全地使用API令牌/而不需要设置自己的后端？

我希望Pipedrive可以让我配置它允许从哪些域调用API，不幸的是，这是不可能的。

Answer 1

不幸的是，除了设置后端服务并将其存储在您提到的后端服务之外，在您的环境中没有安全的方法可以做到这一点。

即使您可以安全地存储该值，但您面临的问题是，任何人仍然可以查看您网站上发生的网络活动，以获取令牌。