如何重置vue.js应用程序，就像用户在浏览器中按F5一样

Question

我有一个vue.js应用程序，它使用axios发出API请求，并在请求头中传递一些授权令牌。如果授权令牌在一段时间内过期，API调用失败，代码为401，我的应用程序显示登录页面，用户在其中输入登录名和密码，因此应用程序获得新的授权令牌并继续工作。

可能有更好的解决方案，但目前我的想法是以这种方式处理授权令牌过期：如果我出现401错误，我会完全重置应用程序(包括其状态，更重要的是，所有仍在进行中的axios请求(，然后当用户按下"登录"按钮时，我会显示登录页面并重新初始化应用程序。为了实现这个场景，我需要一种方法来立即中断所有当前的应用程序活动，就像用户用F5按钮重置页面一样。这样做可能吗？这是个好主意吗？

EDIT1：如果我执行window.location.reload((怎么办？

Answer 1

首先：您正在考虑的将应用程序重置为初始状态并将用户重定向到登录页面的方法(重新加载整个页面(是错误的。

您有多种选择来处理您的问题(代币到期/未经授权访问您的应用程序(

1. 实现刷新令牌功能，因此每当您面临令牌到期的情况时，您都可以在内部刷新用户令牌，而用户不必担心甚至不必知道，或者
2. 如果令牌不可刷新(或者你不想要这样的功能(，那么只需从保存它的任何地方(本地存储或仅在vuex存储中(清除用户的信息，并使用router.push()将用户重定向回登录页面
3. 在这篇文章中扩展@LinusBrog的答案，你也可以在函数中提取原始状态之外的初始数据，然后使用相同的函数首次初始化你的状态，然后在令牌到期的情况下，当你想重置它时，再次使用router.push()方法将用户重定向到你的登录路由

在(2(和(3(中，您还需要实现路由保护，在没有令牌的情况下，路由保护将不允许用户进入您的应用程序，并始终将他重定向回登录。

例如：

routes: [
{
path: '/login',
name: 'Login',
beforeEnter: guardRoute,
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
beforeEnter: guardUserRoute,
}
]
function guardAdminRoute (to, from, next) {
// get your token here either from localstorage or Vuex store
if (!auth.token) {
next({
name: 'Login',
query: { redirect: to.fullPath }
})
} else {
next()
}
}

现在，对于取消您的所有Axios请求，Axios支持从v0.15起取消请求。这是一份很好的文档。

是的，在回答你编辑过的问题时，作为一个快速而丑陋的破解，你可以使用window.location.reload((函数来重新加载你的应用程序，但你需要再次将用户重定向到登录路径。