在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

相关文章