解决使用 RESTful API 请求接口时遇到的 401 错误

在前端开发过程中，我们经常需要使用 RESTful API 来请求接口。然而，在使用过程中，我们常常会遇到 401 错误，这是因为我们没有通过验证或者验证过期。

什么是 401 错误

401 错误是 HTTP 协议中的一种错误状态码，表示客户端请求需要认证，但是客户端没有提供认证信息或者认证失败。一般在使用 RESTful API 请求接口时出现，原因可能是没有提供正确的身份认证信息或者身份认证信息已经过期。

如何解决 401 错误

提供正确的身份认证信息

在请求接口时，一般需要提供身份认证信息。如果没有提供正确的身份认证信息，就会出现 401 错误。因此，我们应该检查是否提供了正确的身份认证信息。

例如，在使用 axios 请求接口时，我们可以在请求头中添加 Authorization 字段，来提供身份认证信息：

axios({
  method: 'get',
  url: '/api/users',
  headers: {
    Authorization: 'Bearer ' + token
  }
})

检查身份认证信息是否过期

身份认证信息有可能会过期，如果过期了就会出现 401 错误。因此，我们应该检查身份认证信息是否过期。如果过期了，可以重新获取身份认证信息，并重新请求接口。

例如，在使用 axios 请求接口时，我们可以在请求响应出现 401 错误时，重新获取 token 并重新发送请求：

// www.javascriptcn.com code example
axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  if (401 === error.response.status) {
    return refreshToken().then(() => {
      const config = error.config;
      config.headers.Authorization = 'Bearer ' + token;
      return axios(config);
    });
  } else {
    return Promise.reject(error);
  }
});

在上面的代码中，我们使用 axios 的拦截器，在请求响应出现 401 错误时重新获取 token 并重新发送请求。

总结

在这篇文章中，我们介绍了什么是 401 错误，以及如何解决这种错误。在使用 RESTful API 请求接口时，我们应该注意身份认证信息的正确性和过期时间。如果出现 401 错误，我们可以通过提供正确的身份认证信息或者重新获取身份认证信息来解决这个问题。希望本文能提供一些帮助，让你以后使用 RESTful API 更加顺畅！

示例代码

下面是一个使用 axios 请求接口时处理 401 错误的示例代码：

// www.javascriptcn.com code example
import axios from 'axios';

const api = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json',
  },
});

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(response => {
  return response.data;
}, error => {
  const status = error.response ? error.response.status : null;
  if (status === 401) {
    return refreshToken().then(() => {
      const originalRequest = error.config;
      originalRequest.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
      return axios(originalRequest);
    });
  } else {
    return Promise.reject(error);
  }
});

function refreshToken() {
  // code for refreshing token
}

export default api;

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d472a8b5eee0b525bfdceb