如何使用jwt token访问nextjs 14中服务器端组件中的API？

Question

当用户登录时，我有一个登录组件（客户端组件）。在nest js（不是下一个）中单独制作的后端提供jwt_token。现在我在服务器端呈现的用户页面上显示所有用户。如何正确存储此令牌以放入授权标头以访问所有 API。我在反应中做了同样的事情，我将令牌存储在本地存储中，但在服务器端本地存储中不起作用。另外，我不想仅仅为了这个令牌而创建整个组件客户端

这是我的用户组件

async function getData() {
 const token='abc'
 const res = await fetch('apiurl',{cache:'no-store',
headers:{
  'Authorization':  `Bearer ${token}`
}})
 
 
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}

const UsersPage = async () => {

   const users = await getData()
  return (
    <div>
        <ol>
           {
            users?.map((user,ind) => <li key={ind}>
              <Link href={`/users/${user.id}`}>
              {user.businessName}
              </Link></li>)
              
           }
        </ol>
    </div>
  )
}

export default UsersPage

Answer 1

我认为在这种情况下最好的方法是使用cookie。您可以在 NestJS 后端设置 cookie，或者仅在后端响应到达且状态为 200 时设置它们，并在中间件上验证这一点，例如：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import {verifyIfIsValidToken} from './verifyIfIsValidToken'

export function middleware(request: NextRequest) {
  
  function  isAuthenticated(request:NextRequest) {
      
  const token =  request.cookies.get('x-server-token')
  
  if(token) {
      return  isValidToken(token)    // boolean
  }
    return false
  }
 
  // Call our authentication function to check the request
  if (!isAuthenticated(request)) {
    // Respond with JSON indicating an error message
  
  return Response.json(
      { success: false, message: 'authentication failed' },
      { status: 401 }
    )
  }
  
  return request
}