Question

在我的应用程序（Mongo，Express，Node，React）中，我目前正在使用JSON Web令牌对客户端到服务器的用户进行身份验证。但是，我希望能够让两种不同类型的用户访问应用程序的不同部分。最好的方法是什么？我目前在同一模型中保存了两种类型的用户，并使用一个区分它们的布尔值。为了澄清，不同类型的用户将能够访问不同的API以及客户端应用程序的不同部分。

是否有处理此问题的包？ JWT功能？

Answer 1

您可以通过以下两种方式执行此操作：

编码JWT令牌时，也要对用户角色进行编码。
例如，当您解码JWT令牌并获取用户ID时，请查询您的数据存储以获得该用户的角色。

大多数软件包都允许您定义要编码的内容。

提示：

始终在令牌上设置到期日。它只是一个存储日期 JWT。解码令牌时，请确保日期为将来如果不拒绝访问。
创建一个检查用户角色的中间件。例如：

router.get('/restricted-area', requiresAdmin, (req, res, next) => {
  // only admin can access this
});

function requiresAdmin(req, res, next) {
  if(req.user.admin !== true) {
     res.status(401).end();
  } else {
     next();
  }
}

Answer 2

想要在建议的答案中添加一些内容。我从Auth0如何使用jwt中获取了很多东西。您可能想要使用它，以便了解它们如何处理身份验证并保护其路由。另一件真正帮助我理解使用jwt的方法是使用jwt website上的调试器。

允许用户访问不同的API端点

任何人都可以使用decoded jwt令牌。任何人都可以看到令牌上的内容。 jwt的重要部分是它有一个签名。如果有人想要获取令牌，更改信息然后访问您的API，则签名将被搞砸，并且该令牌应该被拒绝。

您需要做的就是创建一个路由中间件。如果路由受到保护，则用户在标头中发送jwt。中间件将做两件事：

检查令牌的签名以确保令牌有效且未被篡改。
解码令牌以查看JSON上的内容。由于jwt只是一个JSON，你可以添加任何你想要的属性。添加属性权限并设置用户权限的级别。以下是auth0的一个教程，讲述了像slack这样的现实生活公司如何使用jwt令牌来定义用户可以做什么和不能做什么。许多相同的原则适用于您想要做的事情。 Auth0 with multi tenant apps

如何使用React限制用户端的用户？

我在评论中看到了这个问题，如果有人有兴趣，我会在这里提出答案。如果有人真的想要，他们可以拿走他们的令牌，改变它，并获得任何可视组件（反应）。原因是您不希望在客户端上保留任何令牌签名机密。但即使有人改变了他们的令牌，他们也无法做出任何伤害。如果他们试图向服务器发送请求，他们的令牌将被拒绝，您的api将受到保护。

反应路由器和动态路由

对于没有弄乱其令牌的99.9％的用户，决定允许他们使用的网站部分的最佳方法是使用react-router。由于React是单页面应用程序，因此只有一个静态html文件将您的构建发送到客户端。对于其他框架，服务器上的不同路由将在不同的静态端点发送不同的页面。为了模仿具有反应的页面行为，人们使用React Router是很常见的。 React Router创建动态路由，因此当用户将端点插入浏览器时，它可以模拟典型静态网站的工作方式。

它还可用于限制用户访问某些组件。用户登录后，您可以发送已解码的令牌信息并将其保存到您的反应状态。其中一个是你的权限参数。使用react路由器，当用户尝试导航到需要权限的位置时，您可以引用其状态并将其重定向到受保护的组件或重定向到授权的catch，返回到它们来自的位置，登录页面等。哪里都行。

Here is a, slightly confusing implementation on the react router documentation site about implementing restricted endpoints.

Another tutorial from auth0 using react router to restrict users。滚动到标题处理身份验证结果

如何在使用JWT进行身份验证时区分用户类型

2 个答案:

允许用户访问不同的API端点

如何使用React限制用户端的用户？

反应路由器和动态路由