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

mitkmikd  于 9个月前  发布在  其他
关注(0)|答案(1)|浏览(168)

我有一个登录组件(客户端组件)当用户登录时。在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

字符串

xpszyzbs

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
}

字符串

相关问题