Javascript 如何使用Vue.js 2、BootstrapVue和axios在Chrome中启用内置密码保存提示

我快发疯了，因为我不能让Chrome密码管理器要求用表单保存密码。假设Firefox保存用户名/电子邮件和密码时没有问题：Chrome，另一方面，它忽略了我所做的每一个更改

我已经知道Google发布了，但我无法使用Fetch API登录，并且我无法将建议的代码改编为

axios

，我只收到一条错误消息，说我需要将凭据存储在

passwordCredentialData

或

HTMLFormElement

中，尝试使用

PasswordCredential

构造函数（无论我如何传递这些凭据）

无论如何，表单本身应该支持浏览器的内置功能。以下是输出代码的示例：

这应该足够了，但它是由Vue.js和BootstrapVue生成的表单。我已经知道AJAX的已知问题。另外，在

元素标记中，还有

method=“post”

，并且它没有改变任何内容。然后，我尝试了新密码，而不是当前密码，没有任何变化

当然，由BootstrapVue生成的源代码有点不同

为了更好地阅读，我删除了与问题无关的类和其他代码片段，如占位符和标签。我打过电话

我了解到谷歌在成功重定向（本例中为Vue.js路由重定向）后激活了Chrome密码管理器，因此相关逻辑至关重要。我尝试将

{withCredentials:true}

添加到

axios

请求属性，但正如我所说的，由于数据格式的原因，它无法创建新的

PasswordCredential

构造函数。最好使用Vue.js

form.email

和

form.password

预定义的模型，尽管使用专用的

FormData

对象也会失败

async handleLogin（）{
等待axios
.post（“/auth”{
电子邮件：this.form.email，
密码：this.form.password
},
{
证书：正确
})
.那么({
...
})
.接住({
...
});
}

上面，方法的第一行用于处理登录。我认为这可能只是一个起点，因为Google开发者展示了如何使用FetchAPI和

PasswordCredential

构造函数存储凭证。我浏览了好几个星期的SO档案，但我仍然不能再进一步了；如果你在意的话，打同步电话并不能解决问题。我做错了什么

编辑•是否有可能仅仅因为我在一个不安全的区域（没有或有未签名的SSL证书的本地域）上，谷歌密码管理器不工作？

AFAIK（阅读）尽管下面的代码应该可以工作，但如果相关域没有有效的SSL证书，它实际上不会工作

async handleLogin() {
  await axios
    .post("/auth", {
      email: this.form.email,
      password: this.form.password
    },
    {
      withCredentials: true
    })
      .then({
        ...
      })
      .then(() => {
        if (window.PasswordCredential) {
          const passwordCredential = new PasswordCredential({ id: this.form.email, password: this.form.password });
          navigator.credentials.store(passwordCredential);
        }
        ...
      })  
      .catch({
        ...
      });
}

这受到了那些只提供有效SSL证书的人的启发，应该适用于他们。到目前为止，还没有办法克服这个问题

编辑•如果您正在开发的站点或webapp位于

localhost

下，则您可能希望从

chrome://flags/#allow-不安全的本地主机

编辑•不幸的是，启用

chrome://flags/#unsafely-对于自定义域，将不安全的源代码视为安全的

，不会改变任何东西（并且会使Chrome更加不稳定）