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

Question

假设我正在尝试使用 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 调用......

Answer 1

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

用于interceptors包含每个的标头值request

这是示例：

axiosInstance.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token')
  config.headers.Authorization =  token

  return config;
});

Authorization每次发出 HTTP 请求时，都会自动存储在 LocalStorage 中的标头值。

注意：将变量替换token为usernameandpassword