Next JS express jwt 认证答案

【问题标题】：Next JS express jwt authenticationNext JS express jwt 认证
【发布时间】：2020-06-07 08:42:34
【问题描述】：

我已经实现了/api/login 来登录用户。我还有一个页面login.js，它将表单数据发送到登录 API。我的登录 api 检查数据库中的用户凭据，然后签署令牌并将其保存到 cookie。我的/api/login：

await authCollection.findOne(
  {
    authCode: req.body.authcode,
  },
  function(err, doc) {
    if (err) throw err;
    if (!doc) return res.status(400).send('auth not found');
    if (doc) {
      const token = jwt.sign({ _id: doc._id }, process.env.TOKEN_SECRET);
      res
        .status(200)
        .cookie('token', token, {
          maxAge: 2 * 60 * 60 * 1000,
          httpOnly: false,
        })
        .send(token);
    }
  },
);

我可以通过传入这样的中间件来保护我的 api 路由：

function(req, res, next) {
  const token = req.cookies.token || '';
  if (!token) {
    return res.status(401).send('Access denied');
  }

  try {
    const decrypt = jwt.verify(token, process.env.TOKEN_SECRET);
    req.user = {
      id: decrypt.id,
      firstname: decrypt._id,
    };
    next();
  } catch (err) {
    res.status(400).send('Invalid token');
  }
}

我不明白如何保护我的/pages 目录中的普通页面。有人可以给我一个正确方向的提示吗？我已经用谷歌搜索并阅读了每个页面，但无法实现

【问题讨论】：

与问题无关，但最好使用express-jwt

标签： node.js express authentication jwt next.js

【解决方案1】：

这取决于，我所做的是编写一个 hoc privateArea，它返回一个新组件，该组件从 API 获取用户 accessToken，然后对其进行解码，如果用户登录，则呈现包装页面，否则，呈现“限制区域”消息。

export function privateArea(PageComponent) {
  const PrivateArea = ({ accessToken, pageProps }) => {
    const user = decodeToken(accessToken);
    if (user) {
      return <PageComponent {...pageProps} />;
    } else {
      return <RestrictedArea />;
    }
  };

  PrivateArea.getInitialProps = async (...args) => {
    const accessToken = await api.getAccessToken();

    if (typeof PageComponent.getInitilProps === 'function') {
      const pageProps = await PageComponent.getInitilProps(...args);
    }
    return {
      accessToken,
      pageProps: pageProps || {},
    };
  };
  return PrivateArea;
}

【讨论】：