Как добавить аутентификацию и сеанс входа в ReactJS React Router и Redux с MongoDB + NodeJS Express?

Question

У меня есть сервер MongoDB + NodeJS Express с запуском Webpack и возможностью зарегистрировать пользователя с учетными данными в базе данных. Теперь я хотел бы добавить аутентификацию и сеанс, когда пользователь входит в систему. Я ищу Passport.js, но, похоже, не понимаю, как все можно объединить.

Какой был бы лучший подход к нему? Будем очень благодарны за любые примеры и рекомендации.

Пока это мои настройки.

Для сервера:

var express = require('express'); 
var path = require('path'); 
var config = require('../webpack.config.js'); 
var webpack = require('webpack'); 
var webpackDevMiddleware = require('webpack-dev-middleware'); 
var webpackHotMiddleware = require('webpack-hot-middleware'); 
var bodyParser = require('body-parser'); 
var MongoClient = require('mongodb').MongoClient; 
var ObjectId = require('mongodb').ObjectID; 

var app = express(); 
var db; 

var compiler = webpack(config); 

app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath})); 

app.use(webpackHotMiddleware(compiler)); 

app.use(express.static('dist')); 

app.use(bodyParser.json()); 

app.post('/api/users/', function(req, res) { 
    console.log('Req body', req.body); 
    var newUser = req.body; 
    db.collection('users').insertOne(newUser, function(err, result) { 
    if(err) console.log(err); 
    var newId = result.insertedId; 

    db.collection('users').find({_id: newId}).next(function(err, doc) { 
     if(err) console.log(err); 
     res.json(doc); 
    }) 
    }) 
}) 

app.get('/', function (req, res) { 
    res.sendFile(path.resolve('client/index.html')); 
}); 

MongoClient.connect('mongodb://localhost/testdb', function(err, dbConnection) { 
    if(err) console.log(err); 

    db = dbConnection; 
    var server = app.listen(3000, function() { 
     var port = server.address().port; 
     console.log("Started server at port", port); 
    }); 
}); 

И как для маршрутизатора (Войти страница будучи в Login и регистр страницы существо вынести на Register): запрос POST

//react-router 
render(
    <div> 
    <Provider store={store}> 
     <Router history={hashHistory}> 
     <Route 
      component ={MainPage} 
      path='/' 
     > 
      <IndexRoute component={Login}/> 
      <Route 
      component={Register} path="Register" 
      /> 
     </Route> 
     </Router> 
    </Provider> 
    </div>, 
    document.getElementById('app') 
) 

API в Redux:

//How registered user's credentials are stored via action in redux 
    registerUser(username, email, name, password) { 
    console.log('Started registering request') 
    var user = { 
     username: username, 
     email: email, 
     name: name, 
     password: password, 
    } 

    var request = { 
     method: 'POST', 
     headers: { 
     'Content-Type': 'application/json' 
     }, 
     body: JSON.stringify(user) 
    } 

    console.log('Adding user: ', user) 

    fetch(`http://localhost:3000/api/users`, request) 
    .then(res => res.json()) 
    .then(user => { 
     console.log(user); 
     return user; 
    }) 
    .catch(err => { 
     console.log('Error is', err) 
    }) 

    console.log('Ending registering request') 
    }, 

Answer 1

Если я хорошо понимаю, что вам нужно кинуть p ваш пользователь вошел в систему. Я бы предложил использовать jwt для создания токена после того, как ваш пользователь зарегистрировался jwt и сохранил этот токен в localstorage.setItem (токен).

Надеется, что это поможет