使用 react 和 passport js 从服务器获取 POST

Question

我有一个表单作为 POST 请求提交...

<form onSubmit={this.handleLogin.bind(this)} action="/" method="post">
    <div>
        <label>Username:</label>
        <input type="text" name="username"/>
    </div>
    <div>
        <label>Password:</label>
        <input type="password" name="password"/>
    </div>
    <div>
        <input type="submit" value="Log In"/>
    </div>
</form>

所以 onSubmit 我打电话给 handleLogin，它正在尝试提交表格...

handleLogin(){
    fetch('http://localhost:8080', {
        method: 'post',
       body: JSON.stringify({
         username: this.state.username,
         password: this.state.password

      })
   })

}

表单正在提交到我的服务器，应该得到请求的 POST 如下所示...

app.post('/', function(req, res, next) {
    console.log("post");
    passport.authenticate('register', function(err, user, info) {
        console.log("authenticate");
    })(req, res, next);
});

出于某种原因，user 为空，info 为假，这意味着护照未正确调用。默认情况下，passport js 需要用户名和密码，所以我不确定我是否应该通过 POST 请求传递用户名和密码。

这是我的 passport...

的其余代码

passport.use('register', new LocalStrategy({
    passReqToCallback : true
},
function(req, username, password, done) {

    process.nextTick(function(){

    //find user in DB with this username
        User.findOne({'username': username}, function(err, user) {

            if (err) {

                console.log("Error in registration: " + err);
            }
            //If user already exists in DB
            if (user) {
                console.log("User already exists");
                return done(null, false, req.flash('message', 'User Already Exists'));
            }
            else {

                //if user does not exist, create it
                var newUser = new User();

                newUser.username = username;

                newUser.password = newUser.generateHash(password);
                //console.log("hgeeer");
                //save the user
                newUser.save(function(err) {

                    if (err) {
                        console.log('Error in Saving user: '+err);  
                        throw err;
                    }
                    console.log("User Registered");
                    return done(null, newUser);
                });
            }

        })
    })
}));

这样做的正确方法是什么？

Answer 1

我认为你没有给 passport

相关信息

尝试在Strategy

中给出username和password

passport.use('local-signup', new LocalStrategy({
        // by default, local strategy uses username and password, we will override with email
        usernameField : 'email',//changed   accordingly as `username`
        passwordField : 'password',
        passReqToCallback : true // allows us to pass back the entire request to the callback
    },

可以参考here

Answer 2

对于后端：

passport-local 策略对请求 body 使用 urlencoded 格式。从文档中，您需要指定 urlencoded 中间件：

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

对于前端

当您使用 JSON.stringify() 参数时，提取 api 将使用默认的 content-type header 作为 text。为了将它们 body 作为 urlencoded 格式发送，您可以：

fetch(url, {
   ...
   //you don't have to specify the conten-type header, because fetch will use urlencoded format automatically when you use URLSearchParams api
   body: new URLSearchParams(your_json_data_here)
});

使用 react 和 passport js 从服务器获取 POST

fetch POST from server using react and passport js

api

node.js

reactjs

passport.js