javascript - 请问下nuxt.js或者next.js框架cookie如何做续期和过期操作的？

Question

SSR框架下只能通过cookie通信，但是如何做到服务端和客户端cookie续期和过期的？大家说说自己公司如何做的，非常感谢 ！

Answer 1

这篇文章相关讲解：我应该如何处理nuxt cookie过期和工作流程？：https://stackoverflow.com/questions/60237594/how-should-i-handle-nuxt-cookies-expiration-and-workflow

export const getToken = payload => {
    return jwt.sign(payload, process.env.SEED, { expiresIn: process.env.EXPTOKEN });
}
export const checkToken = (req, res, next) => {
    const rawToken = req.headers["authorization"]
    if (rawToken) {
        try {
            const token = rawToken.substring(7)
            // Verify that the token is validated
            const { user, role } = jwt.verify(token, process.env.SEED);

            const newToken = getToken({ user, role });

            req.user = user;
            req.role = role;
            res.header("Access-Control-Allow-Origin", "*");
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            res.set("Access-Control-Expose-Headers", "authorization");
            res.set("authorization", newToken);

        } catch (error) {
            if (error.name === "TokenExpiredError") {
                res.set("Access-Control-Expose-Headers", "authorization");
                res.set("authorization", false);
            }
            console.log("invalid token", error);
            return new AuthenticationError
            // Invalid Token
        }
    }

    next();
}

中间件：

export default function ({ app, route, error, redirect }) {
  const hasToken = !!app.$apolloHelpers.getToken()

  // this part does not work
  /*   const tokenExpireDateTime = app.$cookies.nodeCookie.parse('cookie-name', 'expires')
    if (hasToken && tokenExpireDateTime < 0) {
      error({ statusCode: 403, message: 'Permission denied', description: 'Sorry, you are forbidden from accessing this page.' })
      app.$apolloHelpers.onLogout()
      return redirect('/login')
    }
   */
  if (!hasToken) {
    if (route.name === 'welcome-key') {
      // enrollment link route
    } else {
      if (route.name === 'home') {
        error({ errorCode: 403, message: 'You are not allowed to see this' })

        return redirect('/showcase')
      }
      if (!['login', 'forgot_password', 'reset_password-key'].includes(route.name)) {
        error({ errorCode: 403, message: 'You are not allowed to see this' })

        return redirect('/login')
      }
    }
  } else {
    if (['login', 'forgot_password', 'reset_password-key'].includes(route.name)) {

      redirect('/')
    }
  }
}

Answer 2

问了一下chatgpt，这是它的回答：

1. 设置合理的 cookie 有效期：合理的 cookie 有效期应该根据网站的特点来确定，通常建议将其设置为一定时间内（如 30 分钟）。
   引用
2. 定时刷新 cookie 的有效期：可以通过服务器端的 HTTP 拦截器来监测每个请求的 cookie 是否即将过期，当发现其即将过期时，立即重新设置一个新的 cookie，并在响应头中返回给客户端。
   引用
3. 前端优化提示弹窗：通过前端 JavaScript 实现 cookie 弹窗过期提醒，将其结合到用户体验优化方案之中，提供清晰的提示，帮助用户处理 cookie 续期或是否关闭要求。
   引用
4. 风控，控制 cookie 的数据权限：根据用户的操作行为等风险因素，为 cookie 设置不同的权限级别，限制 cookie 的数据权限。
   引用
5. 使用 HTTPS 协议：采用 HTTPS 协议，可保障传输过程中传输安全。 在实践中，续期策略需要根据不同网站的业务场景，以及用户的使用习惯，考虑相应的细节情况。

上面说定时去刷cookie比较好，但是我觉得这会影响性能，然后我又问有比定时刷新更好的吗？

useEffect(() => {
    // 判断是否是客户端
    if (process.browser && isLogin){
      window.addEventListener("focus", handleFocus);
      return () => {
        window.removeEventListener("focus", handleFocus);
      };
    }
  }, [])

它的意思是不要用轮询的方式，而是用 window.addEventListener("focus", handleFocus);方式监听用户动作，去后台验证cookie，如果快要过期则重新生成cookie写入到浏览器，最后感觉这个方法是优的！