【发布时间】:2021-04-09 21:44:34
【问题描述】:
一直在努力找出用户登录/注册的反应,以及为什么我的 axios 没有在对我的 api 的成功发布请求时调用 .then。
服务器.js
//Node packages
const path = require('path');
//Required NPM Packages
const express = require('express'),
app = express(),
session = require('express-session'),
cors = require('cors'),
bodyParser = require('body-parser'),
mongoose = require('mongoose'),
MongoStore = require('connect-mongo')(session),
methodOverride = require('method-override'),
passport = require('passport'),
LocalStrategy = require('passport-local');
//MongoDB models.
const Product = require('./models/Product');
const User = require('./models/User');
//Routes.
const indexRoute = require('./routes/index');
const demoRoute = require('./routes/demos');
const blogRoutes = require('./routes/blogs');
const userRoutes = require('./routes/users');
//Port.
const PORT = 5000;
const DATABASE_URI = require('./config/database');
const mongoOptions = { useNewUrlParser:true, useUnifiedTopology:true};
//Connect to mongoDB.
mongoose.connect(DATABASE_URI, mongoOptions);
const sessionOptions = {
secret: 'somesecretword',
resave: true,
saveUninitialized: true,
store: new MongoStore({ mongooseConnection: mongoose.connection })
}
//set session options
app.use(session(sessionOptions));
//Setup body-parser.
app.use(express.json());
app.use(bodyParser.urlencoded({extended:true}));
//Allow express/node to accept Cross-origin resource sharing.
app.use(cors());
app.use(express.static(path.join(__dirname, '..','client','build')));
//Setup method override.
app.use(methodOverride("_method"));
//Congifure passport.
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
app.use(function(req,res,next){
res.locals.currentUser = req.user;
next();
})
//register API routes to express.
app.use('/', indexRoute);
app.use('/demos', demoRoute);
app.use('/blogs', blogRoutes);
app.use('/users', userRoutes);
// //Register React routes to express
app.use('about', express.static(path.join(__dirname, '..','client','build')));
app.get('*', (req,res)=> {
res.sendFile(path.join(__dirname,'..','client','build','index.html'));
})
//listen to established port.
app.listen(PORT, () => {
console.log(`The server has started on port ${PORT}!`);
});
module.exports = app;
登录路径
router.post('/login', passport.authenticate('local'), (req, res) => {
console.log('success');
res.json({authenticated:true});
});
React 前端函数
async function handleRegister(evt){
//Prevent default form redirect.
evt.preventDefault();
//Create a new user objec to pass into axios
const user = {
username: username,
password: password
}
//Send axios post request to nodeJS API.
await axios.post("http://*******/users/register", user)
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
//Push react history back to index page.
}
现在我正在使用 Passport.js 和 passport.local.mongoose 策略和 connect-mongo。当我继续使用正确的用户信息发布到登录路径时,后端的回调返回成功。根据 passport.authenticate 方法,如果身份验证成功,那么我们 console.log 并发送 res.json。
我尝试使用res.send, res.json, res.sendStatus,但它们似乎都不起作用。我是否缺少某种护照设置?就护照本地猫鼬的文档而言,我不必建立配置。
我想要发生的事情是,当我登录时,我发送一个重定向来响应并通过 history.push(routeUrl); 将响应路由推送到 react-router 的历史对象;
【问题讨论】:
-
您将
async/await语法与.then语法混合在一起。使用其中一种,它们不兼容 -
您是否在“网络”选项卡中收到响应?可能是cors的问题。如果可能,请分享控制台和网络选项卡的屏幕截图。此外,您的代码(在服务器端)中缺少 /users/register 路由。
-
那么你是说你在 axios 中的 POST 请求总是采用
.catch路径?一直没解决? -
我想用 axios 来确保我们得到响应,我们必须使用等待?还是只有在我们不做 .then 之后才这样做?仍在学习 axios 和 async 函数的来龙去脉。
-
不,使用了
async/await,因此您可以编写异步代码,就好像它是同步的,而不是使用.then回调。这是一种通用的 Javascript 语法,与 axios 无关。如果您查看 axios 的 Github 页面,大多数示例使用.then但在示例部分中您可以找到async/await的示例 github.com/axios/axios#example
标签: node.js reactjs mongodb express react-router