背景

我们在项目开发中经常会遇到新开页面的情况，这时我们在某一个页面登录或者退出登陆后，切换其他窗口发现需要刷新才能统一登录状态，否则会出现接口报错的情况，很影响用户体验感

解决办法

在app.vue文件中添加以下代码，结合自身项目情况

import Cookies from 'js-cookie'
import {useEventListener} from '@vueuse/core'
import {useUserStore} from '@/store'
const store = useUserStore()
const reloadPageByToken=()={
	const localToken=Cookies.get('token')
	if(document.visibilityState==='visible' && (store.$state.token||localToken) && store.$state.token!==localToken){
	location.reload()
	}
}
useEventListener(document,'visibilitychange',reloadPageByToken)

实际上就是判断cookie中获取的token和本地store中的token是否一致，不一致时强制刷新页面罢了