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

待我称王封你为后i 2023-01-17 13:51 85阅读 0赞

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

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

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

[axios 传递数组爬坑总结][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)   // 返回接口返回的错误信息
      });

### 截图展示 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]  
点击确定按钮即可跳转到登录页。

[axios]: https://blog.csdn.net/chang100111/article/details/116204999?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]: /images/20221021/cefbad5dd03b45a399e390117611b21b.png