服务器返回401是什么意思,怎么处理

你当像火烈鸟
2,695 阅读3分钟

以下是对服务器返回 401 错误的详细解释及处理方法：

1. 错误含义

  • 401 Unauthorized：

    • 服务器返回 401 表示客户端请求需要用户身份验证，但请求中缺少或提供了无效的身份验证凭证。这是一种 HTTP 状态码，表明用户没有权限访问所请求的资源，因为他们尚未提供有效的认证信息，或者提供的认证信息已过期或错误。

2. 常见场景

2.1 API 请求

  • 未登录请求受保护资源：

    • 当用户试图访问需要登录才能使用的 API 资源时，如果用户未登录或登录凭证过期，服务器会返回 401 错误。例如，用户在未登录的情况下请求 /api/user/profile 这样的受保护资源，服务器会响应 401。

2.2 令牌过期或无效

  • 使用令牌进行身份验证的情况：

    • 在使用 JWT（JSON Web Token）或其他令牌进行身份验证的系统中，如果客户端发送的令牌过期或无效，服务器会返回 401。例如，客户端发送了一个已过期的 JWT 令牌，服务器在验证时会拒绝该请求并返回 401。

3. 处理方法

3.1 前端处理

3.1.1 重新登录

  • 引导用户登录：

    • 对于需要用户登录的情况，前端可以检测到 401 错误后，将用户重定向到登录页面。例如，在 Vue 应用中：

收起

javascript

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

  • 解释：

    • 使用 Axios 的拦截器，当收到 401 响应时，将用户重定向到 /login 页面。
3.1.2 刷新令牌

  • 使用刷新令牌机制：

    • 如果使用了令牌认证，可以在收到 401 后尝试使用刷新令牌获取新的访问令牌。例如：

收起

javascript

axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response.status === 401) {
      try {
        const refreshToken = localStorage.getItem('refreshToken');
        const response = await axios.post('/api/refresh', { refreshToken });
        const newAccessToken = response.data.accessToken;
        localStorage.setItem('accessToken', newAccessToken);
        error.config.headers['Authorization'] = `Bearer ${newAccessToken}`;
        return axios(error.config);
      } catch (refreshError) {
        window.location.href = '/login';
      }
    }
    return Promise.reject(error);
  }
);

  • 解释：

    • 当收到 401 错误时，尝试使用存储的刷新令牌向 /api/refresh 发送请求获取新的访问令牌，更新本地存储的访问令牌并重新发送原请求。如果刷新令牌也无效，将用户重定向到登录页面。

3.2 后端处理

3.2.1 检查认证逻辑

  • 验证凭证：

    • 后端需要检查用户提供的认证信息是否正确。例如，在 Node.js 中使用 Express 和 Passport 中间件：

收起

javascript

const passport = require('passport');
const express = require('express');
const app = express();

app.use(passport.initialize());

app.get('/api/protected', passport.authenticate('jwt', { session: false }), (req, res) => {
  res.json({ message: 'This is a protected resource' });
});

  • 解释：

    • 使用 Passport 的 jwt 策略进行身份验证，如果验证失败会返回 401。
3.2.2 提供更详细的错误信息

  • 返回错误消息：

    • 后端可以在 401 响应中提供更详细的错误信息，帮助前端更好地处理错误。例如，在 Node.js 中：

收起

javascript

app.use((err, req, res, next) => {
  if (err.name === 'UnauthorizedError') {
    res.status(401).json({ message: 'Invalid token or token expired' });
  }
});

  • 解释：

    • 当发生 401 错误时，返回具体的错误消息，告知用户是令牌无效还是过期。

4. 总结

4.1 前端

  • 拦截和重定向：

    • 使用请求拦截器检测 401 错误，引导用户登录或尝试刷新令牌。

4.2 后端

  • 检查和优化认证逻辑：

    • 确保认证逻辑的正确性，提供详细的错误信息，帮助用户解决问题。

通过这些方法，可以有效地处理服务器返回的 401 错误，确保用户在访问受保护资源时能够正确认证，同时为用户提供更好的体验。在实际开发中，根据使用的技术栈和应用场景，灵活运用上述方法可以解决 401 错误带来的问题。

avatar
文章
阅读
粉丝