nextjs 项目如何合理存储access_token和refresh_token?

Question

项目介绍：
我现在用的是nextjs 14 app router.正常情况下我们可以把 userId 加密一下，然后存在cookie里面保持登陆状态。但是我现在的项目稍微有点特别

我们公司还是用的前后端分离的结构，也就是，我登陆之后，我需要保存后端返回的，access_token,refresh_token,role 等信息，这样就造成了一点麻烦，如下：

1. 我本想把整个login response加密一下，存在一个cookie中，结果发现超过了4k的限制。这个该如何解决？
2. 加密之后，我把access_token和refresh_token放入cookie 里面可以吗，是否会不安全？
3. 如果#2 做法不推荐，那么我也想不到有什么更好的做法了，我不想要把access_token/refresh_token存在客户端浏览器localStorage中，一个是安全的问题，另外一个，每次更新token的时候比较麻烦，放入 Beaer token的时候也有点麻烦。
4. 主要是这个refresh_token放在哪里，我没想好。

不知道各位有经验的大佬，能不能给点提示，教我一下。最后，设置cookie的时候我已经：

  cookies().set("session", session, {
    httpOnly: true,
    secure: true,
    expires: expiresAt,
    sameSite: "lax",
    path: "/",
  })