Как отличить пользовательские типы при аутентификации с помощью JWT

В моем приложении (Mongo,Express,Node,React) в настоящее время я аутентифицирую пользователей от клиента до сервера с помощью веб-токенов JSON. Тем не менее, я хочу, чтобы два разных типа пользователей имели доступ к разным половинкам приложения. Каков наилучший способ сделать это? В настоящее время у меня оба типа пользователей сохранены в одной модели с логическим значением, которое их различает. Чтобы уточнить, разные типы пользователей смогут получить доступ к разным API, а также к различным частям приложения на стороне клиента.

Есть ли пакет, который обрабатывает это? Особенность JWT?

Источник

2 ответа

Решение

Хотел немного добавить к предложенному ответу. Многое я беру из того, как Auth0 использует jwt. Возможно, вы захотите поиграть с ним, поэтому посмотрите, как они обрабатывают аутентификацию и защищают свои маршруты. Еще одна вещь, которая действительно помогла мне понять способы использования jwt, - игра с отладчиком на веб-сайте jwt.

Предоставление пользователям доступа к различным конечным точкам API

Токен JWT может быть декодирован любым пользователем. Любой может увидеть, что находится на жетоне. Важной частью JWT является то, что он имеет подпись. Если кто-то захочет получить токен, изменить информацию и затем получить доступ к вашему API, подпись будет испорчена, и этот токен будет отклонен.

Все, что вам нужно сделать, это создать промежуточное программное обеспечение маршрута. Если маршрут защищен, пользователь отправляет jwt в заголовке. Промежуточное программное обеспечение будет делать 2 вещи:

  1. Проверьте подпись токена, чтобы убедиться, что токен действителен и не был подделан.

  2. Расшифруйте токен, чтобы увидеть, что находится в JSON. Поскольку jwt - это просто JSON, вы можете добавить к нему любое свойство, которое захотите. Добавьте свойства разрешения и установите уровень доступа пользователей. Вот учебник от auth0 о том, как реальные компании, такие как Slack, могут использовать токены jwt, чтобы определить, что пользователь может и не может делать. Многие из тех же принципов применимы именно к тому, что вы хотите сделать. Auth0 с мультитенантными приложениями

Как я могу ограничить пользователей на стороне клиента с помощью React?

Я видел этот вопрос в комментариях и выкину ответ здесь, если кому-то будет интересно. Если кто-то действительно хочет, он может взять свой токен, изменить его и получить доступ к любому визуальному компоненту (в реакции). Причина в том, что вы не хотите хранить какие-либо секретные подписи на своем клиенте. Но даже если кто-то и поменяет свой токен, он не сможет причинить вреда. Если они попытаются отправить запрос на сервер, их токен будет отклонен и ваш API будет защищен.

Реактивный маршрутизатор и динамическая маршрутизация

Для 99,9% ваших пользователей, которые не связываются со своим токеном, лучший способ решить, какие части сайта им разрешено использовать, - это использовать response-router. Поскольку React является одностраничным приложением, существует только один статический HTML-файл, который отправит вашу сборку клиенту. С другими фреймворками разные маршруты на вашем сервере будут отправлять разные страницы в разные статические конечные точки. Чтобы имитировать поведение этой страницы с помощью реакции, очень часто люди используют React Router. React Router создает динамические маршруты, поэтому, когда пользователи вставляют конечные точки в браузер, он может имитировать работу типичных статических сайтов.

Его также можно использовать для ограничения доступа пользователей к определенным компонентам. Когда пользователь входит в систему, вы можете отправить декодированную информацию токена и сохранить ее в своем состоянии реакции. Одним из них будет ваш параметр полномочий. В реагирующем маршрутизаторе, когда пользователь пытается перейти к местоположению, для которого требуются разрешения, вы можете сослаться на его состояние и перенаправить их либо на защищенный компонент, либо обратно на авторизованный перехват, туда, откуда они пришли, на страницу входа и т. Д. В основном где угодно.

Вот немного запутанная реализация на сайте документации реагирующего маршрутизатора о реализации ограниченных конечных точек.

Еще одно руководство от auth0, использующее реагирующий маршрутизатор для ограничения пользователей. Прокрутите до заголовка Обработать результат аутентификации

Источник

Есть два способа сделать это:

  1. Когда вы кодируете токен JWT, закодируйте также роль пользователя.
  2. Например, когда вы декодируете токен JWT и получаете идентификатор пользователя, сделайте запрос в хранилище данных, чтобы получить роль этого пользователя.

Большинство пакетов позволит вам определить, что вы хотите кодировать.

Подсказки:

  1. Всегда устанавливайте срок действия своих токенов. Это просто дата, хранящаяся на JWT. При декодировании токена просто убедитесь, что дата в будущем, если нет, запретите доступ.

  2. Создайте промежуточное ПО, которое проверяет роль пользователя. Например:

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();
  }
}
Источник
Другие вопросы по тегам