Axios中配置跳转登录页面的方案

问题描述

在使用axios进行前端与后端交互时，当后端返回未登录或登录已过期的状态码时，前端需要跳转到登录页面进行重新登录。本文将介绍如何在axios中配置跳转登录页面的方案。

方案解析

要实现跳转登录页面的功能，我们需要在axios的请求拦截器中进行相关设置。具体步骤如下：

  1. 创建一个axios实例，进行相关配置。例如，我们可以在axiosConfig.js文件中定义一个axios实例。
import axios from 'axios';

const instance = axios.create({
  baseURL: ' // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});

export default instance;
  1. 在axios实例中，使用请求拦截器拦截所有的请求。我们可以在axiosConfig.js文件中添加如下代码：
import axios from 'axios';
import router from '@/router'; // 导入vue-router实例

const instance = axios.create({
  baseURL: '
  timeout: 5000,
});

instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token'); // 获取本地存储的token
    if (token) {
      // 如果token存在，则将它添加到请求的headers中
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，我们使用interceptors.request.use方法拦截所有的请求，并在发送请求之前判断本地是否存在token。如果存在，则将token添加到请求的Authorization字段中，以便后端进行身份验证。

  1. 在axios实例中，使用响应拦截器处理后端返回的响应。我们可以在axiosConfig.js文件中添加如下代码：
import axios from 'axios';
import router from '@/router';

const instance = axios.create({
  baseURL: '
  timeout: 5000,
});

instance.interceptors.request.use(
  function (config) {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    // 对响应数据做些什么
    return response;
  },
  function (error) {
    // 对响应错误做些什么
    if (error.response.status === 401) {
      // 如果返回状态码为401，则表示未登录或登录已过期，跳转到登录页面
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，我们使用interceptors.response.use方法拦截所有的响应。在响应拦截器中，判断后端返回的状态码是否为401，如果是，则表示未登录或登录已过期，我们可以通过router.push('/login')方法跳转到登录页面。

示例演示

下面我们通过一个示例来演示如何使用上述方案实现跳转登录页面的功能。

假设我们有一个登录页面Login.vue，当用户点击登录按钮时，我们使用axios发送登录请求。在后端返回未登录或登录已过期的状态码时，我们需要跳转到登录页面。

<template>
  <div>
    Login Page
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from '@/axiosConfig';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      axios
        .post('/login', {
          username: this.username,
          password: this.password,
        })
        .then((response) => {
          // 登录成功
          console.log(response.data);
        })
        .catch((error) => {
          // 登录失败
          console.error(error);
        });
    },
  },
};
</script>

在上述示例中，我们在`