ログイン認証とセッションを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でレンダリングされている）：Reduxの中

//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のPOSTリクエスト：

サーバーの場合

//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

私がよく理解していれば、あなたのユーザーはログインしています。ユーザがログインjwtの後にjwtを使ってトークンを作成し、このトークンをlocalstorage.setItem（トークン）に保存することをお勧めします。

希望する