創建React應用程序+ Express.js + Passport.js登錄問題

因此，我試圖在後端使用Express React App和Express.js。我在不同的端口上運行這兩個端口 - 前端是3000，後端是3001.我使用本地Passport策略作爲登錄系統。登錄系統工作正常。在前端，我有一個註冊/登錄表單，它向localhost：3001/register（或login）發送一個post請求，併成功註冊/登錄該用戶。然後，我在後端有另一條路由，應該返回當前登錄的用戶的數據，如果有登錄的用戶，或者以其他方式返回帶有「未認證」消息的對象。創建React應用程序+ Express.js + Passport.js登錄問題

app.get('/loggedUserInfo', function(req, res) { 
    if (req.user) { 
     console.log(req.user); 
     res.json(req.user); 
    } else { 
     console.log('not authenticated'); 
     res.json({'message': 'not authenticated'}); 
    } 
});

現在，在客戶端，我想根據此請求的響應修改導航欄。例如，如果用戶登錄，我想要一個包含註銷按鈕的導航欄，如果用戶沒有登錄，我想要一個帶有登錄和註冊按鈕的導航欄。所以，在組件做出反應，我有這樣的相關代碼：

componentDidMount() { 
    fetch('localhost:3001/loggedUserInfo') 
    .then(res => console.log(res.json())); 
}

這應該改變組件的狀態，但它記錄到控制檯的響應，只是爲了測試。即使用戶登錄，每一次都會返回「未通過身份驗證」的對象。這就像用戶從未登錄過。

但是，另一方面，如果我在我的瀏覽器中訪問本地主機：3001/loggedUserInfo，用戶登錄後，我會得到預期的結果。它返回我需要的用戶信息。

這真的是在擾亂我，我似乎無法弄清楚爲什麼會發生這種情況。我需要客戶端的數據。

如果有人想看到我的app.js文件，這裏是有關的代碼（按順序），在那裏我覺得我包括需在那裏的一切：

var cookieParser = require('cookie-parser'); 
var session = require('express-session'); 
var bodyParser = require('body-parser'); 
var cors = require('cors'); 

app.use(cors()); 
app.use(session({ 
    secret: 'secretKey', 
    resave: false, 
    saveUninitialized: true 
})); 
app.use(passport.initialize()); 
app.use(passport.session()); 

app.use(cookieParser()); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false }));

來源

2017-07-17 Abdulah Hamzic

你確定你的組件再次渲染？我不知道，但它可能是你的組件只渲染一次，所以你有第一個'res'返回時，用戶沒有登錄 – kikiwie

擴大我的評論：

的問題是，你是不是發在獲取餅乾。所以你的後端永遠不會得到一個cookie，對於後端，你不是登錄。當你直接訪問url時，它的工作原理是，瀏覽器發送它（如果你嘗試與郵遞員，你會看到它會工作）

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

看看這裏，在節標題爲：發送憑據以獲取請求。

fetch(url, { 
    credentials: 'include' 
})

來源

2017-07-17 16:13:16 yBrodsky

創建React應用程序+ Express.js + Passport.js登錄問題

回答

相關問題