在Nuxt.js中，如何将某些路由仅限于具有有效JWT令牌的客户端？

在Nuxt.js中，这是实现身份验证的一种方式：

1. 客户端通过向Nuxt后端的API路由发送带有凭据的HTTP请求进行认证；
2. Nuxt后端响应JWT token，允许客户端访问受保护的路由；
3. 最后，当经过身份验证的用户尝试访问这样的路由时，他们向Nuxt后端发出HTTP请求，并将其JWT令牌插入标头；
4. 后端验证JWT令牌，并向客户端响应请求的页面JSON数据。

我不明白的是，如何让Nuxt后端知道，对于某些受保护的路由，它必须在提供页面JSON数据之前检查客户端的JWT令牌。我的意思是，Nuxt中的确切位置我可以实现这种验证吗？

---

解决方案

嗯，我有点困惑，首先你说api data，另一句话你说json page..但是。如果要保护页面，则需要创建中间件

中间件/auth.js

export default async function ({ store, $axios, redirect }) {
  let valid = await $axios.$post('/api/checktoken')
  if (!valid) {
    redirect('/')
  }
}

您需要创建一个API来检查令牌。通常，您需要将令牌放入标题中，如Authentication: Bearer token...，而我只是将令牌保存在cookie中。因为如果您向服务器发送HTTP请求，cookie会自动发送该请求，因此我不需要做一些额外的工作。

下一步是转到某个页面并设置您的中间件身份验证。

page.vue

<script>
export default {
   middleware: "auth"
}
</script>

但是，如果您想保护一些后端路由，可以这样做。重新创建中间件

  async authenticate(req, res, next) {
    let token = await cookieService.getTokenFromCookie(req)
    if (!token) return errorService.resError(res, 400, 'Authorization failed')
    let tokenValid = await tokenService.verifyToken(token)
    if (!tokenValid)
      return errorService.resError(res, 400, 'Authorization failed')
    let decodedData = tokenService.decode(token)
    if (!decodedData)
      return errorService.resError(res, 400, 'Authorization failed')
    res.locals.userId = decodedData.userId
    res.locals.role = decodedData.role
    next()
  }

在这种情况下，您基本上需要从Cookie中读取令牌。(如果您不使用cookie，则需要从标头中读出它，因此您应该创建一个从标头中读出令牌的函数)

检查Token是否在那里。

验证令牌是否有效。

解码令牌，以便您可以访问其中的数据

现在您还可以将数据放到您的res.locals中。优点在于，此数据的作用域为当前请求，您可以在下一个中间件/终结点中访问它。

然后调用next()转到下一个中间件/端点

function endpoint(req, res) {
   let { userId, role } = res.locals
   do something....
}

因此路由如下所示：

app.use("/some/api/point", authenticate, endpoint)

好处是您可以在要保护的每个API路由中放置authenticate。