Как делать login в ReactJS?

У меня есть компонент так называемый login, и он думал о следующем...

Восток - мой onSubmit function, который работает, послав form login и решает ответ сервера.

onSubmit (e) {
  fetch (`http://localhost:3000/api/users/login/${this.state.username}/${this.state.password}/`, {
    method: 'POST'
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
      
      console.log('ok');

    }
  });
}

Внутри этого if, где он console.log('ok'); мне хотелось бы создавать например куки-файл, который продолжался бы 1 час, и потом знать о, который способ мог бы проверять в остальных компонентах, когда этот куки-файл включает, или я не схватил позволять ввод информации dashboard или посылать это login. Не, если это правильная форма, я прочитал что-то из JWT, но он крайне трудный для нового кого-то в этом и правда этот сайт не нуждается demaciada в безопасности. Что они рекомендуют мне делать?

1
задан 16.01.2017, 22:30
0 ответов

Внутри этого if, где он console.log('ok') мне хотелось бы создавать например куки-файл, который продолжался бы 1 час

Куки-файлы создаются на сервере и посланы к клиенту, так, с каждой просьбой посланы подразумеваемые.

Пример login в Express:

Заметь: нужно устанавливать middleware cookie-parser и cookie-session`.

// registramos el middleware
app.use(session({
  secret: 'Sup3R$ecR3t'
  cookie: {
    httpOnly: true,
    expires: new Date(Date.now() + 60000)
  }
});

Рекомендуемая форма состоит в том, чтобы сохранять информацию прямо в памяти.

Заметь: нужно устанавливать middleware cookie-parser и express-session`.

app.use(session({
  secret: 'Sup3R$ecR3t',
  saveUninitialized: false,
  cookie: {
    expiress: new Date(Date.noe() + 60000),
    httpOnly: true
  }
});

В этой форма, данные о сеансе сохраняют в памяти, уже не в одной куки-файл, как случается с предыдущим примером. Единственным, что сохраняет в одной куки-файл, здесь является id сеанса пользователя.

Как только был добавлен middleware сеанса, когда loguee пользователь и покроет объект session request он начнет Ваш сеанс.

app.post('/login', (req, res) => {
  let { email, password } = req.body;
  UserRepository.login(email, password)
    .then(logged => {
      if(logged) { // login correcto
        res.session.user = { email };
        res.jsonp({ success: true });
      } else {
        res.jsonp({
          success: false,
          message: 'Email o contraseña incorrecta'
        });
      }
});

Не, если это правильная форма, я прочитал что-то из JWT, но он крайне трудный для нового кого-то в estoy и правда этот сайт не нуждается demaciada в безопасности

В этом случае тебе достаточно использовать куки-файлы. С другой стороны, JWT не является трудным, в действительности это достаточно просто, только значится создания token и посылания этого клиенту как с куки-файлами, так, в каждой просьбе этот token будет послан в сервер.

Что JWT?

JWT - открытый стандарт (RFC 7519), который определяет безопасный способ устанавливать коммуникацию между двумя частями. Важность стандартного состоит в том, что информация, которая имеется, подписана digitalmente, что подразумевает важную надбавку безопасности. В самом деле, JWT может быть подписанным используя классический алгоритм HMAC или с ключом RSA.

Когда используется JWT, разрешение сохраняет в клиенте, обычно в localStorage и в каждой просьбе, которая делается в сервер, он послан в заголовке Authorization со стоимостью Bearer <token>.

Следующий пример симулирует login используя jsonwebtoken.

Первый давайте верить в функцию, которую создавал бы token:

const jwt = require('jsonwebtoken');

function createToken (user) {
  return jwt({
    user,
    secret: 'MySecret',
    expiresInMinutes: 60
  });
}

Секунда мы делаем login, если этот успешный, производится token и посылает себе клиента:

app.post('/login', (req, res) => {
  UserRepository.login(email, password)
    .then(user => {
      if (user) {
        res.jsonp({
          success: true,
          user,
          token: createToken(user)
        });
      }
    });

Когда пользователь согласится на любой ресурс (будьте API или что-нибудь в этом роде), декодируется token, который подразумеваемый в заголовке Authorization и он сравнивается. Для ésto мы можем осуществлять middleware, который бы это делал в каждой просьбе.

app.use('/app', (req, res, next) => {
  // no hay cabecera Authorization, por ende,
  // el usuario no se ha logueado
  if (!req.headers.authoritzation) {
    // redirigimos hacia login
    return res.status(403).redirect('/login');
  }
  const token = req.headers.authorization.split(' ')[0];
  jwt.decode(token, 'MySecret', (err, decoded) => {
    if(err) {
      return res.status(403).redirect('/login');
    }
    next(); // payload verificado, prosigue ;)
  });
});

Когда token умрет, token не будет послан в просьбе и middleware redigirá к /login.


Какие-то преимущества JWT:

  • Легкий взобранный горизонтальный
  • Полезный, чтобы осуществлять безопасных АПИС РЕСТФУЛЬ
  • У них есть объединенный механизм "автомобиля истечения"
2
ответ дан 03.12.2019, 17:39
  • 1
    Спасибо guz, как уже ты будешь знать я использую backend в node делая rest api и front-end в react, в случае когда использую JWT, не должен устанавливать midelware? И последний Восток код, который проверяет auth header, пошел бы в section Landing, где я звоню во все компоненты, или в каждом из компонентов, которые он желает, будьте частными? Помни, что у меня есть каждый компонент routeado (Эдж. / login, / categories, / давайте давать) –  17.01.2017, 18:14
  • 2
    middleware, где проверяет в token дебет mapear маршруты, которые должны быть уборными. Например, в твоем случае, который является aplicació n с login, все маршруты, в excepció n от /login они должны быть защищенными middleware. –  17.01.2017, 19:53
  • 3
    Мне не удается понять, что он исходит из твоего expilcacion, он идет на сервер в node, и который в react :s –  17.01.2017, 20:27
  • 4
    authorizació n он делается очевидно в backend, front не имеет nothing to do с этим. –  17.01.2017, 20:45
  • 5
    Костлявая, что каждый раз, когда я ввожу информацию в компьютер например в / categories я должен делать request backend, чтобы спрашивать у него, если этот сеанс этого пользователя даже активная? Как был бы это? –  17.01.2017, 20:53