使用 JWT 在 Next JS 中进行条件渲染

Question

我有这样一个组件：

export default function Header () => {

return (

<button>
FIRST BUTTON
</button>

<button>
OTHER BUTTON
</button>
)
}

我需要做的是，如果用户未连接，则显示第一个按钮，如果连接，则将其替换为另一个按钮。

我从另一个 API 收到 json 网络令牌，并将其设置在本地存储中。

但是不知道之后怎么办

我试图放置一个三元表达式，但似乎在 HTML 呈现时无法访问令牌，因此它不起作用。

Answer 1

I set it in the local storage.

您不能使用 local storage 执行此操作，因为它仅适用于 client-side 渲染。使用 Next.js，您还需要为 server-side 渲染保留数据。

我建议您将 json 网络令牌移动到具有 nookies 的 cookie 中，它将与 client-side 和 server-side 渲染共享值。

然后你就可以这样得到你的token

export default function Header () => {
   const cookies = nookies.get({}) //get all cookies value
   const { tokenValue } = cookies //`tokenValue` is your cookie name

   return (</>
     {tokenValue ? <button>FIRST BUTTON</button> : <button>OTHER BUTTON</button>}
   </>)
}

除此之外，本地存储对于 XSS 攻击并不安全，因此我们应该避免将敏感数据（如令牌）保存在本地存储中。您可以查看 this 以更好地理解。

Answer 2

你可以用这个。

export default function Header() {

    const token = "cookie name";

    return (
        <>
            <button>
                {token ? "FIRST BUTTON" : "OTHER BUTTON"}
            </button>
        </>
    )
}

使用 JWT 在 Next JS 中进行条件渲染

Conditional rendering in Next JS with JWT

jwt

next.js