在 Vue.js 3 中通过 Axios 调用 API 登录时如何隐藏凭据？

Posted 2023-02-22

【中文标题】在 Vue.js 3 中通过 Axios 调用 API 登录时如何隐藏凭据？

【英文标题】：How to hide credentials when call an API login via Axios in Vue.js 3?

【发布时间】：2021-07-29 17:53:09

【问题描述】：

我是 javascript 和 Vue.js 的新手。尝试更多地了解它。现在我在调用将在请求负载中显示密码的 API 登录时会遇到问题。

我想知道它不安全，对吧？如果它是正确的。如何在浏览器中隐藏它？

请任何人帮助或建议给我。

【问题讨论】：

我的建议是你必须使用加密和解密有各种类型的算法

【参考方案1】：

这是一个相当沉重的话题，而且问题不是很具体，所以我会在此过程中做出一些假设。

调用将在请求负载中显示密码的 API 登录

我怀疑你的意思是，如果你在浏览器开发工具栏中查看请求，就会看到密码。

如果是这种情况，这是意料之中的，无法 100% 缓解。我知道人们假设这意味着这意味着数据没有加密，并开发自定义解决方案来隐藏敏感数据。不过要记住的是，只要您使用 https，浏览器就已经为您进行了加密。加密发生在请求离开您的浏览器之后，因此您不会将其视为已加密，但它会以一种对中间任何人隐藏内容的方式传输到指定的服务器。如果您添加一些额外的加密系统，您会增加复杂性，并且只要您也传递密钥，“中间人” 也可以访问它。目标服务器中的端点也是加密的，因此您甚至可以使用GET 来传递敏感信息，而您的浏览器和服务器之间的任何人都不知道它是什么，但不要使用GET，因为POST 有额外的好处就像不将值存储在您的 url 缓存中，服务器不太可能将数据存储在日志中。

正确使用https时，您的数据将在浏览器和服务器之间进行加密。 您应该使用“POST”请求来发送敏感数据 避免在https 之上添加自定义加密。它会增加比安全性更多的复杂性。

还有一些关于将令牌存储在 LocalStorage 与 cookie 中的注意事项。关于哪个更好的最终决定是不确定，但只要采取适当的预防措施，它们都可以是安全的（虽然我认为cookie可以更安全，但前提是你让它们无法被js访问，因此在 SPA 环境中与他们合作变得更加困难）