token失效时在当前页面重新登录

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;
				}

如果你需要完整的文件，请自行去我的组件仓库查看。