로그인 인증 및 세션을 ReactJS React Router 및 Redux와 MongoDB + NodeJS Express에 추가하는 방법은 무엇입니까?

Webpack이 실행 중이고 데이터베이스에 대한 자격 증명을 가진 사용자를 등록 할 수있는 MongoDB + NodeJS Express 서버가 있습니다. 이제는 사용자가 로그인 할 때 인증과 세션을 추가하고 싶습니다. Passport.js을 살펴 보았지만 모두 어떻게 조합 할 수 있는지 파악할 수 없습니다.로그인 인증 및 세션을 ReactJS React Router 및 Redux와 MongoDB + NodeJS Express에 추가하는 방법은 무엇입니까?

가장 좋은 방법은 무엇입니까? 모든 예와 지침은 크게 감사하겠습니다.

지금까지 내 설정입니다. 서버에 대한

: 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 요청 :

을 라우터에 대한

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); 
    }); 
});

및 AS (로그인 페이지 Login에있는 및 레지스터 페이지의 존재가 Register에서 렌더링)

//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') 
    },

출처

2016-08-31 Jo Ko

사용을 도와 희망 [클라이언트 세션 (https://github.com/mozilla/node-client-sessions). 이해하기 쉬울 수도 있습니다. 플러스 그것 moz에 의해 만들어. – magreenberg

@magreenberg 나는이 모든 미들웨어에 대해 알고 있지만, 내가 가지고있는 스택, 특히 반응 라우터와 어떻게 통합 될 수 있는지 이해하지 못하고있다. 예제는 다른 미들웨어에 대한 단순한 링크 이상의 도움이 될 것입니다. –

내가 잘 이해한다면 키를 사용해야합니다. p 사용자가 로그인했다. 사용자가 로그인 jwt 후에 jwt를 사용하여 토큰을 만들고이 토큰을 localstorage.setItem (토큰)에 저장하는 것이 좋습니다.

는

출처

2017-09-25 01:25:10 Nicks

로그인 인증 및 세션을 ReactJS React Router 및 Redux와 MongoDB + NodeJS Express에 추가하는 방법은 무엇입니까?

답변

관련 문제