vue.js - 在路由进入 Vue 路由器之前检查身份验证 token 是否有效

Question

我有一个简单的用例，我的应用程序使用 vue-router 和 vuex。然后 store 包含一个 user 对象，它在开始时是 null。从服务器验证用户后，它发回一个 user 对象，其中包含一个 JWT 授权 token ，该 token 分配给 user 中的对象店铺。现在让我们假设用户在 3 小时后回来并尝试访问路线或执行任何其他操作，考虑到届时身份验证 token 已过期，最好的检查方法是什么(需要调用 axios post 检查它)并将用户重定向到 login 页面。我的应用程序将包含大量组件，因此我知道我可以编写逻辑来检查每个组件的 mounted Hook 中的 token 是否有效，但这意味着对所有组件重复它。此外，我不想使用 beforeEach 导航守卫，因为我无法向用户显示任何视觉反馈，例如 checking... 或 loading....

Answer 1

我在我的一个项目中做了类似的事情，处理这些类型的情况实际上看似困难，但您可以向 protected 路由添加一个 beforeEnter 守卫，然后在身份验证失败时重定向。

const guard = function(to, from, next) {
  // check for valid auth token
  axios.get('/api/checkAuthToken').then(response => {
      // Token is valid, so continue
      next();
  }).catch(error => {
      // There was an error so redirect
      window.location.href = "/login";
  })
};

然后在你的路线上你可以做:

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    guard(to, from, next);
  }
},

您可能会注意到我使用了 location.href 而不是 router.push。我这样做是因为我的登录表单受 csrf 保护，所以我需要一个新的 csrf_token。

您的另一个问题是，如果用户试图在不更改路由的情况下与您的页面进行交互(即他们单击按钮并获得 401 响应)。为此，我发现最简单的方法是检查每个 axios 请求的身份验证，并在收到 401 响应时重定向到 login。

就在防护检查期间添加加载微调器而言，您可以简单地向您的 vuex 存储添加一个加载标志，然后将您的存储导入您的路由器。老实说，虽然我不会打扰，但在一个像样的生产服务器上，检查将完成得如此之快，以至于用户不太可能看到它。