Javascript 存储基本身份验证密码的最佳做法是什么？

假设我正在尝试使用Vue.js构建一个web应用程序，最终用户使用表单订阅时事通讯。 前端是Vue应用程序，后端是PHP REST API

该API需要基本的身份验证

在前端，我使用axios调用API：

axios
    .post('localhost/api/v1/subscriber.php', {
        // I know the data is missing but this is not what the question is about..
        auth: {
            username: 'USER',
            password: 'PASS'
        }
    })

一切正常，只是Vue.js是JavaScript，因此在客户端可见（右键单击->检查/查看页面源代码），每个最终用户都可以看到用户名和密码

“存储”密码（和用户名）的最佳实践是什么？

---

即使PASS是经过哈希处理的密码，最终用户仍可以使用它自己调用API…

您可以将授权头值存储在localStorage或sessionStorage中

使用

拦截器

包含每个

请求的标题值

以下是示例：

axiostation.interceptors.request.use（函数（配置）{
const token=localStorage.getItem（'token'）
config.headers.Authorization=令牌
返回配置；
});作为最佳实践，您不应该存储密码。当用户登录或注册时，应该在后端创建JWT令牌。然后，当您从后端接收到JWT令牌时，可以将其存储在前端（本地存储器）上

简单的加密方法，
您可以在客户端使用任何加密算法加密密码，然后在后端使用相同的密钥解密

加密的艰难之路，
作为一种困难的方法，出于安全原因和安全最佳实践，您应该端到端加密所有请求。否则，任何人都可以访问公共网络上的用户信息

下面的链接包括有关端到端加密的所有详细信息
在我看来，API存在一个基本的设计问题。因为您似乎希望向前端公开一些全局凭据，以便SPA可以根据API进行身份验证。这种方法很奇怪：要么端点是公共的，因此不需要身份验证，要么它是受保护的，每个用户都应该正确地进行身份验证

如果你只是想保护API免受垃圾邮件机器人等的攻击，你可以向应用程序发送一条消息，并在后续请求中检查它。这绝不是一种强大的保护，而是确保每个
POST
都需要
GET
和垃圾邮件发送者的一些解析

如果您希望跨多个请求对您的用户进行身份验证，则应使用成熟的方法来提供会话或记忆功能。这可能是例如会话cookie（可以工作，但容易受到CSRF攻击）、JWT（有或没有OAuth）或类似的东西

但无论你做什么：不要试图混淆你传递的共享凭证
 用户可以完全查看浏览器可以发出的任何HTTP请求。你不能隐藏任何东西你根本不保存用户名和密码。最好的办法是保存服务器生成的令牌。无论如何，这对用户来说是一个更大的问题，因为如果他为特定网站保存密码，任何具有物理访问权限（其计算机）的人都可以看到密码。如果您确实担心API的安全性，请不要使用HTTP基本身份验证，尤其是共享凭据。设置OAuth授权流，用户在其中提供自己的凭据。请看@Phil我确实理解这个问题，但我从未见过一个网站希望用户在订阅时事通讯之前登录/注册。。。似乎唯一可能的解决方案是不使用API，只在同一页面上使用PHP处理所有内容？也许您希望这样做，尽管这与您已经得到的没有太大区别，但所有页面都可以读取LocalStorage。不要在那里存储身份验证详细信息