Nextjs - 如何在客户端浏览器中存储可以保留浏览器重新启动的 JWT

Question

我正在制作一个应用程序，涉及创建一个客户端必须"记住"的JWT;至少24小时。我知道这听起来很奇怪，但我正在构建的这个应用程序涉及到一种叫做"litprotocol"的东西。去中心化授权。当用户登录/注册时，一系列第三方服务器将创建JWT，生成的JWT有效期为24小时。由于这个JWT涉及到一个有点复杂的过程，为了提高效率，我不想在用户每次尝试登录时都创建一个新的JWT。该应用程序是用Nextjs编写的，我尝试使用以下代码来尝试创建一个持久存储的变量名称"storedVal.">

export default function Home(props: any) {
...
...
...
const [storedVal, setStoredVal] = useState(String);
function storePersistence() {
setStoredVal('I set this');
}
function printPersistence() {
console.log(storedVal);
}
return (
<>
<VStack>
<Heading as='h3'>Connect to see unity app</Heading>
{
!connected ? <Button variant='solid' onClick={connect}>Connect</Button> : <Text>Now you can click on protected path link at the bottom</Text>
}<br></br>
<Button variant='solid' onClick={storePersistence}>Store Persistence</Button>
<Button variant='solid' onClick={printPersistence}>Check Persistence</Button>
</VStack>
</>
)
}

存储持久性"and "检查持久性"按钮和功能是相关的代码。这行不通。只要我重新启动浏览器，"storedVal"清除。那么我怎样才能让storedvalue持久的浏览器和可能的计算机重启?

Answer 1

通过localStorage/sessionStorage在客户端持久化数据的一般思想/机制。

1. JWT发送到客户端时保存在localStorage中
2. 当用户关闭站点并再次打开时，从localStorage获取JWT并检查它是否有效并执行必要的操作。参考博客localstorage.
3. 您可以将JWT设置为如下localStorage.setItem("jwt", value)并获取localStorage.getItem("jwt")

你也可以使用库/框架提供的hooks/function，它们的工作原理类似。

Answer 2

除了@GodWin的评论，你还可以使用这个我喜欢的钩子:useLocalStorage。它有很多变体，你当然可以自己写。它基本上是将localStorage值加载到给定键的钩子中，您可以为其提供默认值。

你可以像使用useState:

一样使用它

function Home() {
const key = "local-jwt"
const defaultValue = null
const [jwt, setJWT] = useLocalStorage(key, defaultValue)
// use your jwt somewhere
return (
...
)
}