如何在 ReactJs API 调用上维护 Node 后端的会话答案

【问题标题】：How to maintain session in Node backend on ReactJs API call如何在 ReactJs API 调用上维护 Node 后端的会话
【发布时间】：2019-05-17 13:25:29
【问题描述】：

我在前端和节点后端都有 ReactJs。在使用 axios 在 reactjs 中的每个 api 调用中，都会在后端生成一个新的会话 id。当我使用 Postman 调用 API 时，每个 API 调用中都会维护会话，并且 connect.sid 存储在 Postman cookie 和在每个 API 调用中 connect.sid 都在标头中传递。我正在尝试使用 axios 在 api 调用中获取 reactjs 中的 connect.sid。

app.js(节点)

    var passport = require('passport');
    var session = require('express-session');
    var express = require('express');
    var path = require('path');
    var cookieParser = require('cookie-parser');
    var app = express();
    app.use(logger('dev'));
    app.use(express.json());
    app.use(express.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(session({
      secret: 'intelligenseintelligensein', // session secret
      resave: false,
      saveUninitialized: false,
      cookie: {
        httpOnly: false,
        secure: false,
        maxAge: 2000000
    }
    }));

passport.js

var passport = require('passport');
var LocalStrategy = require('passport-local');
var user_controller = require('./user_controller');
var functions = require('../functions');
passport.serializeUser(function(user, done) {
    done(null, user);
});

passport.deserializeUser(function(obj, done) {
   done(null, obj); 
});

 // =========================================================================
 passport.use('local-login', new LocalStrategy({
    // by default, local strategy uses username and password, we will override with email
    usernameField : 'email',
    passwordField : 'password',
    passReqToCallback : true // allows us to pass in the req from our route (lets us check if a user is logged in or not)
},
function(req,email, password, done) {
 user_controller.loginUser(req,email,password).then(function (user) {
     if(user) {
         done(null, user);
     } else {
         done(null, user);
     }
 }).fail(function (err){
     done(null, false);
 });
}
));
exports.authenticateUser = function (req, res, next) {
    passport.authenticate('local-login', function(err, user,info) {
        if(err) { 
            return functions.sendErrorResponse(req, res, 400, 'failed to login');
        }
        if(user){
            req.user = user;
            req.session.user = user;
            next();
            }
        else{
            return functions.sendErrorResponse(req, res, 400, 'Cannot login please try again');
        }
    })(req, res , next);
}

    componentDidMount(){
  let apiBaseUrl = process.env.REACT_APP_API_PROTOCOL+'://'+process.env.REACT_APP_API_HOST+':'+process.env.REACT_APP_API_PORT; 

axios.get(apiBaseUrl, {
credentials : 'include'
})
.then(response => {
if (response.status == 200) {
console.log(response.data);
}
else
{ 
  this.errorAlert('Something went wrong');
}
})
.catch(error => {
if(error){
if(error.response != null){
  let error_message = error.response.data.message
  this.setState({
     error_list : error_message
   })

}else{
 let error_message = error.message
   this.setState({
       error_list : error_message
   })
}
}else{
let error_message = 'network error !!!'
  this.setState({
    error_list : error_message
  })
   console.log("leads error_list",this.state.error_list);
   }
 })
}

【问题讨论】：

标签： node.js reactjs session cookies passport.js

【解决方案1】：

我猜你在与 Node.JS 服务器不同的端口上运行你的 React 项目。在两个不同的域（在本例中为端口）之间共享 cookie 并不明智。端口 X 上的 React App 无法从端口 Y 上的 Node.JS App 读取 cookie。也许你应该看看 JWT 的： https://medium.com/@rajaraodv/securing-react-redux-apps-with-jwt-tokens-fcfe81356ea0

【讨论】：