我如何在 NextJs 中访问我的 window.localStorage

Question

我正在学习nextjs，遇到了一个问题，我在localstorage中保存了一个jwt，我创建了一个函数来接收我想要返回的组件（页面），这个函数需要检查是否有localstorage 中的令牌，如果存在则返回组件，如果不存在则重定向用户。我已经在其他应用程序中制作了与此类似的代码（没有 nextjs）并且代码运行良好，但接下来我遇到了以下错误：

服务器错误 参考错误：窗口未定义 生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。

基本上我无法访问窗口。如何访问窗口？有没有更好的方法在nextjs中手动生成私有路由？

这是我在所需组件上使其成为私有路由的方法：

Answer 1

您必须检查 typeof window !== 'undefined' 然后运行 ​​window.localStorage 代码，因为窗口在服务器中未定义，因此您会收到该错误。

if(typeof window !== 'undefined'){
  window.localStorage.getItem('token')
  // all other localStorage must be wrapped with this is if statement check
}else{
 return
}