确实，因为您仍然可以在浏览器中看到此密钥，所以将机密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密钥的正确方法，我将不胜感激。谢谢！
我使用的方法是将配置文件（即config.js）放在“ components”目录之外，该目录可能类似于：
export default {
api: {
USERNAME: 'xxxxx',
PASSWORD: 'xxxxx'
}
};
然后在您的组件中：
import config from './path/to/config.js';
然后在您的组件中访问您的凭据：
var username = config.api.USERNAME;
var password = config.api.PASSWORD
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句