阻止请求的方法

1. 理解登录失效的原理

在前后端分离的开发模式中，前端通常会使用axios作为HTTP请求库，而后端则使用一个框架或库来处理HTTP请求。当用户登录后，前端会获取一个token，用于验证用户的身份。当token失效时，用户需要重新登录才能继续访问需要身份验证的接口。

2. 登录失效请求的处理流程

在axios中，我们可以通过拦截器(interceptor)来实现登录失效时阻止请求的功能。拦截器可以在发送请求或响应返回前对其进行拦截和处理。

以下是处理登录失效请求的流程图：

flowchart TD
    A[发送请求] --> B[请求拦截器]
    B --> C{是否存在token}
    C --> |是| D[设置token到请求头]
    D --> E[继续请求]
    C --> |否| F[跳转到登录页面]
    E --> G[响应拦截器]
    G --> H{是否是登录失效}
    H --> |是| I[清除token并跳转到登录页面]
    H --> |否| J[返回响应数据]

3. 实现步骤

3.1 请求拦截器

在发送请求之前，我们可以通过请求拦截器来判断是否存在有效的token，并将其设置到请求头中。如果不存在token，可以选择跳转到登录页面。

// 在axios实例中添加请求拦截器
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

3.2 响应拦截器

在接收到响应后，我们可以通过响应拦截器来判断响应数据是否表示登录失效。如果是登录失效，我们可以清除token并跳转到登录页面。

// 在axios实例中添加响应拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response && error.response.status === 401) {
      // 清除token
      localStorage.removeItem('token');
      // 跳转到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

3.3 使用示例

在实际使用中，可以在需要身份验证的接口中添加请求拦截器和响应拦截器。以下是一个示例：

axios.get('/api/user', {
  // 添加请求拦截器
  // ...
}).then(response => {
  // 处理响应数据
  // ...
}).catch(error => {
  // 处理错误
  // ...
});

4. 类图

在类图中，我们可以看到axios库的主要类和它们之间的关系。

classDiagram
    class Axios {
        +request(config)
        -getUri(config)
        -requestMethod(url, method, options)
        +get(url, config)
        +delete(url, config)
        +head(url, config)
        +options(url, config)
        +post(url, data, config)
        +put(url, data, config)
        +patch(url, data, config)
    }
    class AxiosInstance {
        -defaults
        -interceptors
        +interceptor
        +request(config)
        +getUri(config)
        -requestMethod(url, method, options)
        +get(url, config)
        +delete(url, config)
        +head(url, config)
        +options(url, config)
        +post(url, data, config)
        +put(url, data, config)
        +patch(url, data, config)
    }
    class AxiosRequestConfig
    class AxiosResponse
    class AxiosError
    class AxiosInterceptorManager
    class AxiosPromise
    class CancelToken
    class Cancel
    class isCancel
    class mergeConfig
    class spread
    class dispatchRequest
    class Interceptor
    class InterceptorManager

    AxiosInstance --> Axios
    AxiosInstance --> AxiosRequestConfig
    AxiosInstance --> AxiosResponse
    AxiosInstance --> AxiosError
    AxiosInstance --> AxiosInterceptorManager
    AxiosInstance --> AxiosPromise
    AxiosInstance --> CancelToken
    AxiosInstance --> Cancel
    AxiosInstance --> isCancel
    AxiosInstance --> mergeConfig
    AxiosInstance