POST 来自 angular.js 不起作用,但直接来自表单有效。为什么?

POST from angular.js doesn't work but directly from form works. Why?

我正在使用 passport.js 为我在 node.js 中的项目进行基本身份验证,它是 LocalStrategy 方法。它甚至还没有密码验证。帐户存储在 MongoDB 实例中。

我被困了一整天,当然我正在通过讲师推荐的绑定表单数据到 angular 并从那里发送 $http.post(),就像这样:

$scope.signIn = function (username, password) {
    $http.post('/login', {username: username, password: password})
        .then(function (res) {
            if(res.data.success) {
                console.log('Logged in');
            } else {
                console.log('error logging in');
            }
        })
};

这是它的路线:

app.post('/login', function (req, res, next) {

    var auth = passport.authenticate('local', function (err, user) {
        if(err) { return next(err); }
        if(!user) { res.send({success: false, user: user}); }

        req.login(user, function (err) {
            if(err) { return next(err); }
            res.render('index', { success: true, user: user });
        });
    });

    auth(req, res, next);
});

除了它总是返回 { success: false, user: false }。经过大量谷歌搜索后,我决定直接从表单提出 POST 请求:

玉:

.navbar-right(ng-controller='navbarLoginCtrl')
form.navbar-form(action='/login' method='post')
    .form-group
        input.form-control(name='username' placeholder='username', ng-model='username' required)
    .form-group
        input.form-control(name='password' type='password', placeholder='password', ng-model='password' required)
    button.btn.btn-default(type='submit' value="Submit") Sign in

相对于:

.navbar-right(ng-controller='navbarLoginCtrl')
form.navbar-form
    .form-group
        input.form-control(name='username' placeholder='username', ng-model='username' required)
    .form-group
        input.form-control(name='password' type='password', placeholder='password', ng-model='password' required)
    button.btn.btn-default(ng-click='signIn(username, password)') Sign in

提交方法确实有效,但我想保持整洁并使用 angular 来完成。 我该怎么做?

其他passport.js组件供参考:

var User = mongoose.model('User');

passport.serializeUser(function (user, done) {
    if (user) {
        done(null, user._id);
    }
});

passport.deserializeUser(function (id, done) {

    User.findOne({_id: id}).exec(function (err, user) {
        if(user) {
            return done(null, user);
        } else {
            return done(null, false);
        }
    });
});

passport.use(new LocalStrategy(
    function (username, password, done) {
        User.findOne({username: username}, function (err, user) {
            if (user) return done(null, user);
            else return done(null, false);
        });
    }
));

您应该检查浏览器发送的内容。

您的浏览器表单以 username=&password= 的形式发送数据,angular post 他们在 JSON {username:, password:} 和 Content-Type header不一样。

如果你想在 angular 中做同样的事情:

 var headers={ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};         
      return $http.post(BackEndpoint+'/login','username='+username+'&password='+password,
    {headers:headers}).then(function(result){
});

这是我用来反对 spring 身份验证的。