Vue axios 拦截器实现用户长时间不操作后跳转至登录页

最近项目要求用户15分钟内不对页面进行操作（不向服务端发送请求）就提示用户登录失效，需要重新登录，并跳转至登录页。

我这里只写了前端代码，因为这一块的服务端是我的同事来做。后期如果有机会我会将这一块进行补充。

说明： 这里是用的我的项目代码，部分引用是多余的我会进行说明
qs : get/delete请求传递数组数据时，对数组进行序列化时使用，解决在url中传递数组问题，可以参考我转载的上一篇文章 ，地址放在下面

axios 传递数组爬坑总结

项目代码

import axios from 'axios';
import qs from 'qs' 
import router from '@/router'
import { MessageBox } from 'element-ui'

//超时时间
axios.defaults.timeout = 20000;
// xx系统的BaseUrl
let base = window.serverUrl.XXX_SERVER;

引入说明:
axios ---- 必须要引入的
router ---- 路由跳转
MessageBox ------ ElementUI的一个提示框，不能直接就让用户跳转到登录页面，要有适当的提示，让用户有个心理准备，这里是对MessageBox的单独引用，如果需要其他的组件 可以在{ } 用逗号隔开进行添加

项目中我们采用token进行身份的验证，token的有效时长为15分钟，这里和后端进行了约定，当用户token过期后，会在response的data中返回一个错误状态码211，用来我们进行判断。 也可根据其他条件进行判断，这里只是提供一种思路。

// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (sessionStorage.getItem('token')) {
      config.headers.Authorization = sessionStorage.getItem('token');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  });
  
axios.interceptors.response.use(
  response => {
    //后端传过来的登录超时的状态211
    if (response.data.code == 211){
      //用户登录超时，重新登陆
      MessageBox.alert('登录信息超时,请重新登录！','登录超时',{
        confirmButtonText:'确定',
        callback: action => {
          //跳转登录页   callback点击确定按钮后的回调函数
          router.replace({
            path: "/login", 
          });
        }
      });
    }
        // 如果值为空则不需要进行赋值
    if (response.headers.token != undefined) {
      sessionStorage.setItem('token', response.headers.token);
    }
    return response;
  },
  error => {
    return Promise.reject(error.response)   // 返回接口返回的错误信息
  });  

截图展示

点击确定按钮即可跳转到登录页。