vue无痛刷新

我们在进行一些增删改查的操作时 客户登录的令牌token过期会跳转到登录页面重新获取令牌token

而无痛刷新的作用就是在客户在进行重要操作时 重新调用一次登录接口将过期的token替换

1.从状态管理定义账号和密码

import { defineStore } from 'pinia';
import { post } from "@/utils/http";
import jscookie from 'js-cookie';
import router from '@/router';

export const useUserStore = defineStore({
    id: 'userStore',
    persist:{
        paths:['user']
    },//指定某个数据进行持久化
    // persist: true, // 开启所有数据持久化
    state: () => ({
        loginInfo: {//用于存储用户账号密码
            username: '',
            password: ''
        }
    }),
})

2.首先从登录页面（login.vue）获取用户的账号和密码，存储到状态管理中

import { useUserStore } from '@/stores/admin/index';//引入状态管理
let store = useUserStore();//状态管理
Object.assign(store.loginInfo,ruleForm)//将用户账号和密码存储到状态管理中

3.在http文件中的响应拦截器，定义一组数据就是需要无痛刷新的页面，先获取页面路径，判断令牌token是否是10006过期，使用some查找那一组需要无痛刷新的页面，此方法返回的是true跟false，判断如果为true则需要无痛刷新，先从状态管理中取出用户账号和密码，再重新调用登录接口重新登录，通过async将异步序列改为同步（同步获取请求），然后在把获取到的接口存储在cookie中，用于登录之后更新令牌

// 需要无痛刷新的操作页面
const HTTP_TOKEN = ["_mt=edit", "_mt=create", "_mt=delete"]
// 添加响应拦截器
instance.interceptors.response.use(async (response: any) => {//async 表示函数里有异步操作 await 表示紧跟在后面的表达式需要等待结果
  // 2xx 范围内的状态码都会触发该函数。
  let data = response.data;
  let { errno, errmsg } = data;
  // 对响应数据做点什么
  let path = router.currentRoute.value.fullPath;//获取页面路径
  if (10006 === errno) {//判断10006是否等于errno，如果相等说明令牌过期了，否则没过期
    let index = HTTP_TOKEN.some(item => response.config.data.includes(item))//查找请求是否需要无痛刷新如果是true就需要无痛刷新，false不需要  
    if (index) {//
      let store = useUserStore()//从状态管理取出用户账号和密码
      const { username, password } = store.loginInfo//解构赋值
      let loginData = { _gp: 'admin', _mt: 'login', username, password }//重新调用登录接口重新登录
      const { data: { data, errmsg, errno } } = await post(loginData)//通过async 将异步序列化改为同步  同步获取请求
      if (200 == errno) {
        jsCookie.set('token', data)//保存令牌
        return instance.request(response.config)//用于再次调用请求拦截器替换token
      } else {
        router.replace({ path: "/login", query: { back: path } }).then(() => { ElMessage.error(errmsg) });//登入后需要跳回的地址
        return Promise.reject(errmsg);
      }
    } else {
      router.replace({ path: "/login", query: { back: path } }).then(() => { ElMessage.error(errmsg) });//登录后需要跳回的地址
      return
    }
  }
  return response;
},
  error => {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

注意：

async是将普通函数转化成异步函数 await是将其转为同步任务并阻塞 等待其他执行完了 在继续