时间戳

首页 > 解决方案 > 如何在 React 中隐藏 API 密钥？

javascript - 如何在 React 中隐藏 API 密钥？

问题描述

将机密 API 密钥保存在 .env 文件中并不会完全隐藏 React 中的密钥，因为您仍然可以在浏览器中看到此密钥，这是真的吗？

那么在 React 中存储 API 密钥的正确方法是什么？我需要从服务器检索它们吗？

例如：

const [key, setKey] = useState('');

const getApiKey = async () => {
    await axios.get("https://example.com/getApiKey").then((res) => { setKey(res) });
}

useEffect(() => {
    getApiKey();
}, []);

我把它放在状态然后像这样使用它吗？

<StaticGoogleMap
    className="google-map"
    size="300x300"
    apiKey={key}
/>

我认为这样 API 密钥仍然对浏览器中的用户可见。

如果有人能解释在前端安全存储 API 密钥的正确方法，我将不胜感激。谢谢！

标签： javascripthtmlreactjs

解决方案

我使用的方法是将配置（即 config.js）文件放在“组件”目录之外，可能如下所示：

export default {
    api: {
        USERNAME: 'xxxxx',
        PASSWORD: 'xxxxx'
    }
};

然后在您的组件中：

import config from './path/to/config.js';

然后在您的组件中访问您的凭据：

var username = config.api.USERNAME;
var password = config.api.PASSWORD

推荐阅读