使用React SPA在node.js express身份验证上快速启动

我开始从Node.JS构建一个应用程序，在Express中使用服务器，在React中使用前端作为SPA

我有一个仪表板，应该只对经过身份验证的用户可用。此外，应该有高级用户和非高级用户。 用户应该能够登录谷歌等，以及使用电子邮件+密码

我在谷歌上搜索了一下，但没有找到明确的答案。。。 我想我理解了如果一切都是服务器呈现的（使用ejs或其他东西），那么它将如何工作，但我并不真正理解如何使用React SPA。PassportJS似乎是这样做的标准？不幸的是，文档结构非常松散。。。也听说过JWTs，但正如你可能看到的，我真的知道的不多

如果能给我一个很好的总结或者一个教程的链接，我会非常感激（但我没有找到任何东西…）

---

提前谢谢

有很多东西可以接受。我去过那里。如果你用WebSPA做服务器API，你需要把你的研究和这两个分开

服务器端： 一个好的开始是：

我非常非常简短地说，您需要创建身份验证和授权。这是一种流行的方法，可以通过使用在express it中实现，如上面的教程所述

客户端： 需要记住的主要一点是，在完成服务器端操作后，每个url都应该在以下情况下返回：

401

或

403

（可能是其他url）：

未经授权 尽管HTTP标准指定“unauthenticated”，但从语义上来说，此响应表示“unauthenticated”。也就是说，客户端必须对自身进行身份验证才能获得请求的响应

松散翻译：您未登录

被禁止的 客户端没有对内容的访问权限；也就是说，它是未经授权的，因此服务器拒绝提供请求的资源。与401不同，服务器知道客户端的身份

松散的翻译：你不允许看/做这些东西

因此，在客户机中，您希望创建一个统一的http api调用程序来处理这些代码。根据您使用的技术（Redux、MobX、FetchAPI等），此“统一调用者”可能会有很大的不同

我将给您留下一个使用fetch和promise的示例：

function globalFetch(url, data) {
  return new Promise((resolve, reject) => {
    fetch(url, data)
      .then(res => {
        if (res.status == 401) {
          // move SPA to login page here.
          reject();
        }

        if (res.status == 403) {
          // move SPA to "you are not allowed to see this stuff" page
          reject();
        }

        resolve(res);
      })
      .catch(erro => {
        // do stuff with the error, like log.
        // move spa to "That’s an error." page.
        reject();
      })
  });
}

您可以将此功能用于SPA中的所有请求，如：

globalFetch('/api/users/login', { method: 'POST', body: { ... } });