axios路由拦截跳转到登录页面会一直执行-摩杜云开发者社区

使用axios实现路由拦截跳转到登录页面

1. 概述

在前端开发中，我们经常会遇到需要对用户进行登录状态的判断，如果用户未登录，则需要跳转到登录页面。为了实现这个功能，可以使用axios拦截器来实现路由拦截并跳转到登录页面的功能。

2. 整体流程

下面是整个流程的简要描述：

创建一个axios实例，并设置拦截器；
在请求拦截器中判断用户是否登录；
如果用户未登录，则跳转到登录页面；
在登录页面登录成功后，保存用户登录信息；
重新发送之前的请求。

下面是具体的每一步需要做的事情。

3. 代码实现

3.1 创建axios实例

首先，我们需要创建一个axios实例，用于发送请求。可以在单独的文件中创建一个axios实例，并导出给其他地方使用。以下是一个示例：

// axiosInstance.js

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: '  // 设置基础URL
  timeout: 5000  // 设置请求超时时间为5秒
});

export default instance;

3.2 设置拦截器

在创建axios实例后，我们需要设置请求和响应的拦截器。在请求拦截器中，我们可以判断用户是否已登录，如果未登录，则跳转到登录页面。在响应拦截器中，我们可以处理请求错误或者根据返回的状态码进行相应的处理。以下是设置拦截器的代码：

// axiosInstance.js

import axios from 'axios';
import router from './router';  // 引入路由实例

// 创建axios实例
const instance = axios.create({
  baseURL: '  // 设置基础URL
  timeout: 5000  // 设置请求超时时间为5秒
});

// 请求拦截器
instance.interceptors.request.use((config) => {
  // 在发送请求之前做些什么

  // 判断用户是否已登录
  if (!localStorage.getItem('token')) {
    // 用户未登录，跳转到登录页面
    router.push('/login');
  }

  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use((response) => {
  // 对响应数据做点什么

  return response;
}, (error) => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance;

3.3 跳转到登录页面

当用户未登录时，我们需要将其跳转到登录页面。在这里，我们使用了Vue Router来实现路由跳转。以下是示例代码：

// router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // 其他路由配置
  {
    path: '/login',
    component: () => import('./views/Login.vue')  // 登录页面组件
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

3.4 登录成功后保存用户信息

在登录页面登录成功后，我们需要将用户的登录信息保存下来，以便在后续的请求中使用。可以使用localStorage或者Vuex来保存用户登录信息。

// Login.vue

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 调用登录接口，验证用户名和密码
      // 登录成功后保存用户信息
      localStorage.setItem('token', 'your_token_here');
    }
  }
}

3.5 重新发送之前的请求

当用户登录成功后，我们希望可以重新发送之前的请求。为了实现这个功能，我们需要在登录成功后，将之前的请求保存下来，并在重新登录后重新发送。以下是示例代码：

// axiosInstance.js

import axios from 'axios';
import router from './router';  // 引入路由实例

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api