我们在进行一些增删改查的操作时 客户登录的令牌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是将其转为同步任务并阻塞 等待其他执行完了 在继续