Vue+Node项目前端怎么拦截请求和响应

在使用Axios时，我们可以通过拦截器（interceptor）来对请求和响应进行拦截处理。Axios提供了interceptors属性来设置拦截器，它包含两个属性：request和response。

1. 拦截请求：

当一个请求被发起时，我们可以在请求被发送之前拦截它，添加一些请求头或请求参数等。我们可以这样来实现它：

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    //  在发送请求之前做些什么
    config.headers.Authorization = localStorage.token;
    return config;
  }, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

上述代码中，我们通过axios.interceptors.request.use方法来设置请求拦截器。在请求被发送之前，我们给config.headers添加了一个Authorization头部，这样就可以在请求中携带token

1. 拦截响应：

当响应返回后，我们可以在调用then或catch之前，对响应进行拦截处理。我们可以这样来实现它：

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    if(response.status == 200){
        return Promise.resolve(response.data);
    }else{
        return Promise.reject(response);
    }
  }, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

上述代码中，我们通过axios.interceptors.response.use方法来设置响应拦截器。在响应被处理之前，我们对响应的状态码进行检查。如果响应状态码为200，我们就通过Promise.resolve方法返回响应数据，否则就通过Promise.reject方法直接返回响应对象。