代码之家 › 专栏 › 技术社区 › Sunil Garg

护照js不使用手动表单数据post请求角度

passport.js angular forms

Sunil Garg · 技术社区 · 8 年前

我已经在angular中创建了一个表单,单击submit按钮,我正在点击一个post请求 Content-Type 带有值的标题 application/x-www-form-urlencoded .

onSubmit(user:User) {
    let headers = new Headers();
    // to send data as form data as passport library want it as a form data
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    return this.http.post('/login', user, { headers: headers }).subscribe((data) => {
      console.log("Data : ", data);
    });
}

模型用户类型为

// Class to bind user data
class User {
  constructor(private name: string, private password: string) {
  }
}

这是服务器端代码

 let userList: User[] = [new User(1, "Sunil"), new User(2, "Sukhi")];

        let app = express();

        // passport library
        let passport = require('passport');
        let LocalStrategy = require('passport-local').Strategy;

        // middlewares
        app.use(express.static("public"));
        app.use(bodyParser.json());
        app.use(bodyParser.urlencoded({ extended: false }));
        app.use(session({ resave: false, saveUninitialized: true, secret: "secretKey123!!" }));

        // passport middleware invoked on every request to ensure session contains passport.user object
        app.use(passport.initialize());

        // load seriliazed session user object to req.user 
        app.use(passport.session());

        // Only during the authentication to specify what user information should be stored in the session.
        passport.serializeUser(function (user, done) {
            console.log("Serializer : ", user)
            done(null, user.userId);
        });

        // Invoked on every request by passport.session
        passport.deserializeUser(function (userId, done) {
            let user = userList.filter(user => userId === user.userId);
            console.log("D-serializer : ", user);
            // only pass if user exist in the session
            if (user.length) {
                done(null, user[0]);
            }
        });
// passport strategy : Only invoked on the route which uses the passport.authenticate middleware.
        passport.use(new LocalStrategy({
            usernameField: 'name',
            passwordField: 'password'
        },
            function (username, password, done) {
                console.log("Strategy : Authenticating if user is valid  :", username)
                let user = userList.filter(user => username === user.userName);
                console.log("Valid user : ",user)
                if (!user) {
                    return done(null, false, { message: 'Incorrect username.' });
                }
                return done(null, user[0]);
            }
));

app.post('/login', passport.authenticate('local', {
     successRedirect: '/done',
     failureRedirect: '/login'
}));
app.get('/done', function (req, res) {
     console.log("Done")
     res.send(req.session)
})


app.get('/login', function (req, res) {
     console.log("login")
     res.send("login")
})

但每次它返回登录时

1 回复 | 直到 8 年前

Sunil Garg 8 年前

就我而言,问题在于请求机构。我直接发送用户对象,所以这不起作用。为了解决这个问题,我使用 URLSearchParams .

let  body = new URLSearchParams();
body.append('name', this.user.name);
body.append('password', this.user.password);

这是 onSubmit 方法

onSubmit() {
    let  body = new URLSearchParams();
    body.append('name', this.user.name);
    body.append('password', this.user.password);

    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({headers});

    this.http.post("/services/login", body.toString(), options).subscribe((response)=>{
        let arrUrl = response.url.split("/");
        let url = "/" + arrUrl[arrUrl.length-1];
        this.router.navigate([url]);
    });
}

其次,从登录表单中,我没有传递 password 领域因此本地策略的回调(使用用户名和密码)没有被调用。

如果您没有传递任何字段,那么回调方法将不会被调用,并将重定向到 failureRedirect URL。