Reference Error：next.js应用程序中未定义窗口，我需要持续存储一个变量

Question

这是我的getServersideProps代码：

//@ts-ignore
export async function getServerSideProps({ req, res, query }) {
  const { id } = query
  const cookies = Cookies(req, res)
  const jwt = cookies.get('lit-auth')
  if (!jwt) {
    return {
      props: {
        authorized: false
      },
    }
  }

  const { verified, payload } = LitJsSdk.verifyJwt({ jwt })
  console.log(verified)
  console.log(payload)
  if (
    payload.baseUrl !== "http://localhost:3000"
    || payload.path !== '/protected'
    || payload.extraData !== id
  ) {
    return {
      props: {
        authorized: false
      },
    }
  }

  storePersistence(payload)

  return {
    props: {
      authorized: verified ? true : false
    },
  }
}

function storePersistence(payload: string) {
  window.localStorage.setItem('lit_protocols_jwt', payload);
}

我

这是我在控制台中遇到的错误，

error - src/pages/protected.tsx (199:2) @ storePersistence
ReferenceError: window is not defined
  197 | 
  198 | function storePersistence(payload: string) {
> 199 |   window.localStorage.setItem('lit_protocols_jwt', payload);
      |  ^
  200 | }
  201 | 

如何在客户端的浏览器中持续存储有效载荷？如果您能想到的话，我愿意尝试其他方法，但是我需要客户的浏览器保留有效载荷以备将来访问。

Answer 1

您可以将数据持续到cookie中。您可以从

res.header('set-cookie: key=value; max-age=2592000');

。或使用 cookies-next ）之类的库。

import { setCookies, getCookie  } from 'cookies-next';

setCookies('key', 'value', options);
getCookie('key', options); // => 'value'