如何在 ReactJs API 調用時在 Node 后端維護會話

Question

我在前端和節點后端有 ReactJs。在使用 axios 的 reactjs 中的每個 api 調用中，都會在后端生成一個新的會話 ID。當我使用 Postman 調用 API 時，會話在每個 API 調用中保持不變，並且 connect.sid 存儲在 Postman cookie 和 In每個 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
    }
    }));

護照.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);
}

login.jsx（reactJS）

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

Answer 1

我猜你在與 Node.JS 服務器不同的端口上運行你的 React 項目。 在兩個不同的域（在本例中為端口）之間共享 cookie 並不明智。 端口 X 上的 React App 無法從端口 Y 上的 Node.JS 應用讀取 cookie。也許你應該看看 JWT： https ://medium.com/@rajaraodv/securing-react-redux-apps-with-jwt- 令牌-fcfe81356ea0