在接受來自 Axios 的發布請求後,我無法進行重定向。我確實知道請求正在發送,並且它至少從'/' 路由獲得一些響應,因為我的控制台記錄了“index”、“用戶驗證”,這是當有人向'/ 發出get 請求時應該發生的情況'。問題是頁面無法載入。我什至在谷歌瀏覽器的網絡選項卡中看到index.js已加載,但無論我嘗試什麼,頁面都不會改變!這有什麼原因嗎?
我所做的其他重定向似乎有效。例如,如果使用者未登錄,索引頁面將重新路由到 /login。這似乎只是發布請求的問題,我已經在使用和不使用護照身份驗證的情況下對其進行了測試(顯然更改為您需要登錄)來重定向)並且結果相同。所以我不認為護照是造成這個問題的原因。
你可以參考下面的package.json來看看我用的是什麼
axios程式碼:
axios.post('/login', {username: username, password: password}) /*.then(response => res.redirect('/'))*/ .then(function (response) { console.log(response); }) .catch(function(error) { console.log(error); })
表達方面:我有控制台日誌在測試期間提醒自己
server.get('/', (req,res) =>{ console.log("Index"); if (req.user){ console.log("user verified"); res.redirect('/'); app.render(req,res, '/',req.query); } else { console.log("user not logged in"); res.redirect('/login'); } }) server.post('/login', passport.authenticate('local'), (req, res, next) => { if (req.user) { console.log("Logging in"); res.redirect('/'); } else { console.log("Passwrod Incorrect"); return res.redirect('/login'); } })
package.json
{ "name": "layout-component", "version": "1.0.0", "scripts": { "dev": "node ./server.js", "build": "next build", "start": "NODE_ENV=production node ./server.js" }, "dependencies": { "@zeit/next-css": "^0.1.5", "axios": "^0.18.0", "bcryptjs": "^2.4.3", "body-parser": "^1.18.2", "connect-flash": "^0.1.1", "connect-mongo": "^2.0.1", "cookie-parser": "^1.4.3", "express": "^4.16.3", "express-session": "^1.15.6", "express-validator": "^5.1.0", "file-loader": "^1.1.11", "hoist-non-react-statics": "^2.5.0", "jsonwebtoken": "^8.2.0", "mongodb": "^3.0.5", "mongoose": "^5.0.12", "next": "^5.1.0", "passport": "^0.4.0", "passport-local": "^1.0.0", "prop-types": "^15.6.1", "react": "^16.3.0", "react-dom": "^16.3.0", "semantic-ui-css": "^2.3.1", "semantic-ui-react": "^0.79.0", "url-loader": "^1.0.1" }, "license": "ISC" }
我後來想通了這一點。顯然,當您發出 Axios post 請求時,您無法從伺服器進行重新導向。至少不是我這樣做的方式(使用預設的 Axios 配置)。您需要在客戶端進行頁面變更。我是這樣做的。
這真的讓我很困惑,因為我使用其他方法從重定向路由接收數據,但頁面未加載。
此外,由於某種原因使用 Next.js,passport.js“successRedirect”和“failureRedirect”JSON 似乎不起作用。這就是為什麼我按照自己的方式編寫路由,並且沒有將其包含在 Passport.authenticate() 函數中。我希望這對某人有幫助!
我的axios提交功能:
我的 Express 伺服器中的 post 請求