在开发过程中,有一些奇葩产品会给一些奇葩需求(至少在前端眼里是奇葩需求),
比如父页面不需要登录,点击某个位置,从新页面打开某个详情页,这个详情页也不需要登录,但是这个详情页的某个功能,需要登录,所以点击这个功能后,跳转到登录页,登陆完后再次回到当前页面,这个时候问题来了,父页面还处于未登录状态,但是轻轻也的新页面已经登陆了。
这个时候,怎么处理,新页面打开的登录页登录状态,和父页面的登录状态相同步呢?来,跨页面通讯postMessage可以解决。
父页面代码
mounted() {
setTimeout(() => {
window.addEventListener('message', function (e) {
if (e.data == 0) {
location.reload()
}
})
}, 1000)
},
详情页代码
data() {
return {
tokens: '',
}
},
created() {
this.tokens = this.user.token
},
watch: {
tokens(val) {
if (val) {
var message = val ? 0 : 1
opener.postMessage(message)
}
},
},
如果觉得不太理解,可以移步b站
【前端】h5 postMessage 展示_哔哩哔哩_bilibili