node.js - 在 nextJS 中为 cookie 创建 HOC(高阶组件)

Question

所以我在 Next.js 应用程序中创建身份验证逻辑。我创建了 /api/auth/login我处理请求的页面，如果用户的数据是好的，我正在创建一个 httpOnly带有 JWT token 的 cookie 并向前端返回一些数据。这部分工作正常，但我需要某种方式来保护某些页面，以便只有登录的用户才能访问它们，而我在为此创建 HOC 时遇到了问题。
我看到的最好方法是使用 getInitialProps但是在 Next.js 网站上它说我不应该再使用它了，所以我想使用 getServerSideProps但这也不起作用，或者我可能做错了什么。
这是我的 HOC 代码:
(cookie 存储在“userToken”名称下)

import React from 'react';
const jwt = require('jsonwebtoken');

const RequireAuthentication = (WrappedComponent) => {

  return WrappedComponent;
};


export async function getServerSideProps({req,res}) {
  const token = req.cookies.userToken || null;

// no token so i take user  to login page
  if (!token) {
      res.statusCode = 302;
      res.setHeader('Location', '/admin/login')
      return {props: {}}
  } else {
    // we have token so i return nothing without changing location
       return;
     }
}
export default RequireAuthentication;

如果您对如何在 Next.js 中使用 cookie 处理身份验证有任何其他想法，我将不胜感激，因为我是服务器端渲染 react/auth 的新手。

Answer 1

您应该从 getServerSideProps 中分离并提取您的身份验证逻辑。 .
例如，您可以有一个高阶函数，它会接受另一个函数(您的 getServerSideProps)，并且如果 userToken 将重定向到您的登录页面。没有设置。

export function requireAuthentication(gssp) {
    return async (context) => {
        const { req, res } = context;
        const token = getUserToken(req.headers.cookie) // Add logic to extract token from `req.headers.cookie`

        if (!token) {
            // Redirect to login page
            return {
                redirect: {
                    destination: '/about',
                    statusCode: 302
                }
            };
        }

        return await gssp(context); // Continue on to call `getServerSideProps` logic
    }
}

然后，您可以通过包装 getServerSideProps 在您的页面中使用它。功能。

// pages/index.js (or some other page)

export const getServerSideProps = requireAuthentication(context => {
    // Your normal `getServerSideProps` code here
})