token失效时在当前页面重新登录
问题: 当浏览器缓存网页内容,可能无法及时识别token失效问题。这种情况下,如果用户在一个需要填写大量数据的表单页面工作,他们可能会在提交保存时遇到token失效的问题。由于token已失效,尽管用户完成了表单的填写,但数据提交过程中会失败,导致填写的数据丢失。这种情况不仅造成了用户的时间和努力的浪费,而且极大地降低了用户体验。 我的解决方法: 在响应拦截器中拦截用户所有token失效的请求,并使用函数式组件,创建一个登录弹框,这个弹框能够在不离开当前页面的情况下显示给用户,并允许他们重新登录以获取新的有效token。当登录成功以后,弹框消失,用户页面数据不丢失,可以继续提交保存的工作。
代码片段
组件仓库 动态打开模态框的函数 这里使用的是vue提供的一个渲染函数API: h() 来创建我们的函数方法。
h() 创建虚拟 DOM 节点 (vnode)。
首先在文件中声明一个openModal的方法,在openModal函数内部,开始操作DOM,创建一个新的div标签,这个标签将作为我们Vue实例的挂载目标。然后使用Vue 3的createApp函数来创建一个Vue实例。这个实例将被用来渲染登录弹窗。最后在vue实例中调用h函数,传入你希望渲染的动态组件。h函数将返回该组件的虚拟节点(VNode),Vue则会将此虚拟节点渲染到指定的挂载点。
// openFunctionModal.ts
import { createApp, h } from "vue"; // 导入必要的函数
// 这是一个用来动态打开模态框的函数
function openModal(component: any, props: { [key: string]: any }) {
// 创建一个div元素作为挂载点
const container = document.createElement("div");
document.body.appendChild(container);
// 使用组件创建一个Vue应用实例
const app = createApp({
// 创建一个返回组件VNode的render函数
render() {
return h(component, {
...props, // 展开任意附加的props
// 定义一个关闭事件处理器
onClose: () => {
// 这将在组件发出'close'事件时被调用
app.unmount(); // 清理工作,卸载应用
document.body.removeChild(container); // 移除挂载点
}
});
}
});
// 将Vue应用实例挂载到容器上
app.mount(container);
}
// 最后,导出openModal函数
export { openModal };
组件文件 创建一个文件,将弹窗需要展示的内容布局样式写好,下面是一个示例文件
<template>
<div class="modal" @click.self="close">
<div class="modal-dialog">
<!-- 插槽允许你传入模板内容 -->
<slot></slot>
<button @click="close">去登录</button>
</div>
</div>
</template>
<script>
export default {
emits: ["close"], // 声明 'close' 以便使用emit函数
methods: {
close() {
this.$emit("close"); // 当需要关闭模态框时,发出'close'事件
}
}
};
</script>
<style>
/* 基础模态框样式 */
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-dialog {
background: white;
padding: 20px;
border-radius: 5px;
/* 根据需要添加更多样式 */
}
</style>
在响应拦截器中使用
if (data.code === ResultEnum.TOKEN_INVALID || data.code === ResultEnum.TOKEN_OVERDUE) {
if (!isShowingTokenDialog) {
isShowingTokenDialog = true;
const globalStore = GlobalStore();
ElMessageBox.confirm("token失效,请重新登录", "重新登录", {
confirmButtonText: "在当前页重新登录",
cancelButtonText: "取消",
type: "warning",
closeOnPressEscape: false,
closeOnClickModal: false,
showClose: false
})
.then(() => {
console.log("执行了then");
openModal(CLoginModal, {
userAccount:
globalStore.userCacheData &&
globalStore.userCacheData.userAccount &&
globalStore.userCacheData.userAccount.length
? globalStore.userCacheData.userAccount
: ""
}); // globalStore.userCacheData.userAccount
isShowingTokenDialog = false;
// console.log(route.path);
// if (route.path !== "/login") {
// openModal(CLoginModal, { message: "去登录" });
// }
})
}
return false;
}
如果你需要完整的文件,请自行去我的组件仓库查看。