如何在不重新加载页面的情况下触发“保存密码”网络浏览器对话框？答案

【问题标题】：How to trigger the "Save password" web browser dialog without reloading the page?如何在不重新加载页面的情况下触发“保存密码”网络浏览器对话框？
【发布时间】：2018-01-30 11:20:03
【问题描述】：

有没有办法使用 React 在不重新加载页面的情况下触发浏览器上的保存密码模式？

我正在使用基于令牌的身份验证。

【问题讨论】：

我试过<form action="#">，效果很好。
它对我不起作用。我在提交处理程序上使用event.preventDefault();。没有它会重新加载页面。

标签： javascript reactjs web passwords

【解决方案1】：

为了让它跨浏览器工作，我唯一做的就是在身份验证成功后立即进行网络查询。

在 render() 方法中：

<form onSubmit={this.submitLogin.bind(this)}>
  <input name="email" type="email" ref={(input) => this.email = input} required={true}/>
  <input name="password" type="password"ref={(input) => this.password = input} required={true}/>
  <button type="submit" name="action">Submit</button>
</form>

submitLogin 方法：

submitLogin(event) {
  event.preventDefault();
  fetch('http://localhost:3000/authenticate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({email: this.email.value, password: this.password.value})
  })
  .then(response => response.json())
  .then(response => {
    if (response.error) {
      throw new Error(response.error);
    } else {
      // process the token ...
    }
  })
  .then(() => {
    // Do an authenticated network query
    // ===> Save password modal pops !!!
  })
  .catch(error => {
    console.error(error);
  });
}

【讨论】：