reactjs - 如何发现一些错误发送数据对后端做出反应?
问题描述
我在一些视频中看到用户名和密码是通过 axios 发送的:
const user_Login = (email, password) => async (dispatch) =>{
dispatch({ type: USER_LOGIN_REQUEST });
try {
const {data} = await axios( {
method: "POST",
data: {
username: email,
password: password
},
withCredentials: true,
url: "http://localhost:3001/login"
});
dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
} catch (error) {
dispatch({type: USER_LOGIN_FAIL, error: error.message});
}
}
当我得到用户名的密码时,我使用了 cors。但是有一个问题我无法修复或找到它。passport.serilizeUser 两次更改用户 ID。并且req.user
无法工作。这是后端:
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const passport = require('passport');
const LocalStrategy = require('passport-local');
const passportLocalMongoose = require('passport-local-mongoose');
const session = require('express-session');
const app = express();
app.use(cors({
origin: "http://localhost:3000",
credentials: true
}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));
app.use(session({
secret: "Our little secret.",
resave: false,
saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());
mongoose.connect(
'mongodb://localhost:27017/testdb'
, {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true
});
const shema = new mongoose.Schema({
username: String,
password: String
});
shema.plugin(passportLocalMongoose);
const User = mongoose.model("users", shema);
// User.plugin( passportLocalMongoose );
passport.use(User.createStrategy());
passport.serializeUser(function(user, done) {
console.log("serilizeUser:", user.id);
done(null, user.id);
});
passport.deserializeUser(function(id, done) {
console.log("deserlizeUser: ", id);
User.findById(id, function(err, user) {
done(err, user);
});
});
app.post('/register', (req, res) => {
console.log(req.body);
User.register( {username: req.body.username}, req.body.password, (err,user)=>{
if(err){
console.log(err);
}
else{
res.send("User successfully registered!");
}
});
});
app.get('/', (req, res) => {
res.send(req.user);
});
app.post('/login', function(req, res){
const _user = new User({
username: req.body.username,
password: req.body.password
});
req.login( _user, function(err){
if(err){
console.log(err);
}
else{
console.log("inside: ", req.user.id);
passport.authenticate("local")(req,res,function(){
console.log("ok!");
})
}
} );
res.send(req.user.id);
});
app.get('/', (req, res) => {
res.send(req.user);
});
app.listen(3001, () => {
console.log(`Server started on port 3001`);
});
当我发送用户名和密码时,我得到控制台:
serilizeUser: 607959e213f2692264c31c3b
inside: 607959e213f2692264c31c3b
serilizeUser: 60794a8736e1df1dfc16c37c
ok!
我认为发送用户名和密码错误。请帮我!我不能解决这个问题 5 天。
解决方案
req.login()
建立登录会话。passport.authenticate()
中间件req.login()
自动调用。passport.serializeUser
将从中调用req.login()
。
在这里,它们都被使用了。只有passport.authenticate()
创建会话并对其进行身份验证才可以。检查以下内容,
app.post("/login", function (req, res) {
passport.authenticate("local")(req, res, function () {
console.log("ok!");
res.send(req.user.id);
});
});
我在本地检查了它,并按您的预期工作!
推荐阅读
- javascript - 加载此标签时如何更改 svg 文本标签 XY?
- javascript - 制表器从表中获取数据但在数组中
- java - 如何访问 HttpServletResponse 的响应正文以登录文件
- python - 使用谷歌(oauth)登录后如何重定向到主页(所需页面)?
- angular - combineLatest 与初始值
- awk - 仅当行不包含特定字符串时才在行内查找/替换 (awk)
- c# - 通过实体框架模式创建时,SQL Server 表中未设置默认值
- image - 使用 RGB 图像和点云,如何从点云生成深度图?(Python)
- angular - Angular FormArray - AbstractControl 类型上不存在属性控件
- python - 使用 Python 正则表达式匹配字母数字单词、提及或电子邮件