Question

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

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

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

Answer 1

第一件事：错误是您正在考虑的（重新加载整个页面）将应用重置为初始状态并将用户重定向到登录页面的方法。

您可以通过多种方法来解决问题（令牌到期/未授权访问您的应用）

实施 刷新令牌 功能，因此，只要遇到令牌到期的情况，就可以在内部刷新用户令牌，而无需用户担心或什至不知道它，或者< / li>
如果令牌不可刷新（或者您不希望使用此类功能），则只需从保存令牌的任何地方（本地存储或仅在vuex存储中）清除用户信息，然后使用router.push()重定向用户返回登录页面。
在此post中扩展@LinusBrog答案，您还可以在函数中将原始数据提取到原始状态之外，然后将相同的函数用于状态的首次初始化，然后在令牌到期时使用您想重置它的情况，然后再次使用router.push()方法将用户重定向到您的登录路由。

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

示例路由守卫可能是：

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起支持取消请求。 here是一个不错的文档。

是的，回答一个已编辑的问题，作为一个快速的丑陋技巧，您可以使用window.location.reload（）函数重新加载您的应用程序，但随后您又需要将用户重定向到登录路径。

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

1 个答案: