在 vue.js 路由器中验证 JWT 令牌

Question

我正在使用以下代码生成 JWT 令牌：

 jwt.sign(id, TOKEN_SECRET, { expiresIn: '24h' });

生成后，我将令牌发送给客户端，客户端将其存储在 cookie 中：

 document.cookie = `session=${token}` + ';' + expires + ';path=/'

此外，我正在使用 vue.js 路由器进行导航。据我了解，如果在路由器文件中添加以下代码，可以插入中间件以保护某些路由。

 router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
   let token = Vue.cookie.get('session')
   if (token == null) {
     next({
      path: '/',
      params: { nextUrl: to.fullPath }
    })
  }
 } else {
  next()
 }
})

但是，我很难理解如何使用这种方法验证 JWT 令牌的有效性，这需要在存储 TOKEN_SECRET 的服务器上而不是在客户端上完成。

Answer 1

让我从这个开始：您保护路线的目标是通过进入一个尝试检索他们无权查看的信息的页面来防止用户体验不佳。

因此，您无需在客户端验证令牌。由于只有当服务器验证用户并返回一个令牌时，令牌才会在手边，因此您（客户端代码的作者）可以使用令牌的存在作为通知用户通过什么路径的手段。

换句话说，拥有令牌的客户端是您允许用户通过受保护路由所需的全部验证。

请记住，受保护的页面本身并没有私有数据。受保护的页面将始终从服务器检索受保护的数据，这意味着服务器毕竟有机会对令牌进行身份验证。