在路由进入 Vue 路由器之前检查身份验证令牌是否有效

Question

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

原文由 Soham Dasgupta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试 Vue.JS Mixins

您可以定义一个全局混合并通过 Vue.use(myMixin) 使用它——然后所有组件都将继承这个混合。如果您定义了一个 mounted 或者可能更好的 activated 钩子在 mixin 上，它将在每个组件上调用。

在那里你可以使用组件可以做的一切 - this 将指向你的组件。而如果组件本身也定义了一个钩子，那么同类型的mixin钩子将在组件自己的钩子 之前 运行。

或者尝试单个顶级登录组件

我们使用了一个稍微不同的解决方案——我们有一个单独的组件来处理所有与登录相关的事情，它存在于父 index.html 中的路由器视图之外。该组件始终处于活动状态，可以隐藏 div 路由器视图并覆盖加载消息或登录屏幕。对于 Intranet 应用程序，只要浏览器保持打开状态，此组件还将使用轮询来使会话保持活动状态。

您可以将路由器导航加载到此组件。 - 因此，想要触发路由器导航的子组件只需设置一个全局反应属性 navigateTo 由顶级身份验证组件监视。这将触发身份验证检查，可能是登录工作流，之后顶级组件将调用 $router.push() 通过这种方法，您可以完全控制任何导航。

原文由 Falco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在我的一个项目中做了类似的事情，处理这些类型的情况实际上看起来很困难，但你可以添加一个 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 响应）。为此，我发现最简单的方法是在收到 401 响应时检查每个 axios 请求并重定向到 login 的身份验证。

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

原文由 craig_h 发布，翻译遵循 CC BY-SA 3.0 许可协议