前端vue+axios实现简单的无感刷新token

1.问题如题

2.描述：无感刷新token是为了提升用户体验，不会在操作页面时因为token过期而很突然的跳回登录页面

3.基本原理：就是在用户发起请求时，在token快过期的时候，后端会返回一个状态码401，通过if判断该状态码，进入if条件时return并且执行一个refreshToken的请求，因为axios是一个promise对象，所以在refreshToken请求执行成功后，在then（）中再return用户上一步请求，请求数据通过响应拦截中的config参数获取。

import axios from "axios"

import { message } from "ant-design-vue"

let isRefresh= false//是否更新token

const request= axios.create({

    baseURL: import.meta.env.VITE_APP_BASEURL_API,

    timeout: 5000,

    headers: {

        'Content-Type': 'application/json',

    }

})


//配置请求拦截

request.interceptors.request.use(res => {

    //可通过res配置需要的请求头

    const token = localStorage.getItem("token")

    if (token) {

        res.headers.token = token;

    }

    //返回请求参数.

    return res.data

}, error => {

    //抛出错误

    return Promise.reject(error)

})

//配置响应拦截

request.interceptors.response.use(res => {

        //如果isRefresh是true，则当前请求刷新token

        if(isRefresh){

                locastorage.setItem("token",res.data.data)

                //修改过后将更新状态再改为false
                isRefresh= fasle

                return res.data
         }

        //刷新token状态码

        if(res.data.code == '401'){

           isRefresh = true//将token更新状态改为true

           return requset().get("/refreshToken").then(res=>{

                    //返回用户上次请求
                    return requset(res.config)

                  }
        }

    return res.data

}, error => {

    return Promise.reject("访问页面错误")

})

4.总结：

        1.定义一个判断refreshtoken的状态

        2.在响应拦截器中判断状态码isRefresh

        3.确认状态码后先将isRefresh改为true，返回并执行refreshtoken的请求，并且在then中通过res.config获取用户上一步请求执行并return，在refreshtoken请求中，通过isRefresh状态，修改token的参数