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

mitkmikd 于 2024-01-07 发布在其他

关注(0)|答案(1)|浏览(205)

我有一个登录组件（客户端组件）当用户登录时。在nest js中单独制作的后端（不是下一个）提供jwt_令牌.现在我显示的用户页面上的服务器端呈现的所有用户.我如何正确存储此令牌放在授权头有所有API的访问.我做了同样的React，我已经存储在本地存储令牌，但在这里在服务器侧本地存储不起作用。另外，我不想使整个组件客户端只是为了这个令牌
这是我的用户组件

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

字符串

next.js

来源：https://stackoverflow.com/questions/77667796/how-to-use-jwt-token-to-access-api-in-server-side-component-in-nextjs-14

1条答案

按热度按时间

xpszyzbs1#

我认为在这种情况下最好的方法是使用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
}

字符串

赞(0）回复(0）举报 2024-01-07

我来回答

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

1条答案

相关问题

热门标签

最新问答