401解释

HTTP 状态码 401 表示“未授权”（Unauthorized）。当服务器返回这个状态码时，通常意味着请求需要用户身份验证。具体来说，会发生以下情况：

身份验证失败：用户提供的凭据（如用户名和密码）不正确，或者未提供凭据。

需要身份验证：服务器可能会返回一个 WWW-Authenticate 头，指示客户端需要提供身份验证信息。

访问被拒绝：即使提供了凭据，用户可能没有权限访问请求的资源。

重定向到登录页面：在某些情况下，客户端可能会被重定向到登录页面，以便用户输入有效的凭据。

总之，401 错误提示用户需要身份验证才能访问请求的资源。

401时浏览器表现

错误码401表示“未授权”，通常是因为用户没有提供有效的身份验证凭据。在这种情况下，浏览器可能会弹出一个认证对话框，要求用户输入用户名和密码。

如果你在处理401错误时希望自定义用户体验，可以通过JavaScript捕获该错误，并显示自定义的表单或模态框，而不是使用浏览器默认的认证对话框。

如何捕捉401错误码

要捕捉401错误并自定义处理，可以使用JavaScript的fetch API或XMLHttpRequest。以下是一个使用fetch的示例：

fetch('你的API端点')
  .then(response => {
    if (response.status === 401) {
      // 捕捉到401错误，显示自定义表单
      showLoginForm();
    } else {
      return response.json(); // 处理其他响应
    }
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

function showLoginForm() {
  // 创建并显示自定义登录表单
  const formHtml = `
    <div id="login-form">
      <h2>登录</h2>
      <input type="text" placeholder="用户名" id="username" />
      <input type="password" placeholder="密码" id="password" />
      <button οnclick="submitLogin()">提交</button>
    </div>
  `;
  document.body.insertAdjacentHTML('beforeend', formHtml);
}

function submitLogin() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  // 处理登录逻辑，发送凭据
  fetch('你的API端点', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ username, password }),
  })
  .then(response => {
    if (response.ok) {
      // 登录成功，处理后续逻辑
    } else {
      // 登录失败，处理错误
    }
  });
}