英文:
Vue - refresh state on clicking back button in the browser
问题
我正在开发一个登录页面，该页面列出了不同的提供者选项。如果您点击提供者，它将重定向到相应提供者的登录页面。这个登录组件有一个名为 "pageRedirect" 的布尔变量。如果 "pageRedirect" 为真，则该组件显示 "正在重定向..."，否则显示提供者列表。
<template>
<div v-if="pageRedirect">
<h1>正在重定向...</h1>
</div>
<div v-else>
<!-- 提供者列表 -->
</div>
</template>
如果您点击提供者，"pageRedirect" 的值将被设置为 true，然后发起一个axios调用到后端。重定向是在后端使用 http.Redirect() 完成的。与此同时，设置 "pageRedirect" 的方法已经完成。因此，当我从重定向后的页面中点击浏览器的返回按钮时，它会返回到登录页面，显示 "正在重定向..."，而不显示提供者列表。这是因为 "pageRedirect" 的值仍然为 true。
axios
.post("/redirectUrl", body, null)
.then(function (response) {
this.pageRedirect = true;
window.location.href = response.headers.location;
// 如果我在这里添加 this.pageRedirect = false，它会显示 "正在重定向..."，但不会自动重定向
})
.catch(function (response) {
// 显示错误
});
如果我尝试在同一方法中将 "pageRedirect" 设置为 false，它不会自动重定向，仍然停留在同一页。因此，我需要一些解决方案，比如使用 vue-watchers 或其他方式，以便在从重定向后的页面中点击浏览器的返回按钮时将 "pageRedirect" 值设置为 false。
提前感谢您的帮助。
英文:
I am developing a login page, which lists different provider options. If you click on a provider, it will redirect to the sign-in page of the respective provider. This login component has a bool variable "pageRedirect". If pageRedirect is true, the component displays "Redirecting...", otherwise it displays the list of providers.
<template>
<div v-if="pageRedirect">
<h1>Redirecting...</h1>
</div>
<div v-else>
<!-- list of providers -->
</div>
</template>
If you click on a provider, the pageRedirect value will be set true and there is an axios call that goes to backend. The redirect happens in the go backend using http.Redirect(). In the mean time, the method that sets the pageRedirect completes. So when I hit the back button in the browser from the redirected page, it returns to the login page which displays "Redirecting..." and does not display the list of providers. This is because the pageRedirect value is still true.
axios
.post("/redirectUrl", body, nil)
.then(function (response)
{
this.pageRedirect = true;
window.location.href = response.headers.location;
// if I add this.pageRedirect=false here, it shows "Redirecting...", but doesnt
// doesnt redirect itself
}).
.catch(function (response) {
//display error
});
If I try to set the pageRedirect to false in the same method, it is not redirecting itself, it remains on the same page. So I need some solution like vue-watchers or something to set this pageRedirect value to false on hitting back button in the browser from the redirected page.
Thanks in Advance
答案1
得分: 0
我通过使用文档的visibilityState来修复它。
document.addEventListener("visibilitychange", () => {
this.pageRedirect = false;
});
感谢 @yoduh 和 @Jose Fernández 对您宝贵的评论。
英文:
I fixed it by using document visibilityState.
document.addEventListener("visibilitychange", () => {
this.pageRedirect=false;
});
Thanks @yoduh and @Jose Fernández for your valuable comments
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论