2017-10-31 7 views
1

私は角度のフォームを作成しました。送信ボタンをクリックしましたContent-Typeヘッダーの値application/x-www-form-urlencodedで投稿要求を打っています。passport.jsが手作業のフォームデータの投稿依頼に対応していません

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

のログイン帰国するたびに、ありますリクエストの本文に問題がありました。私はユーザーオブジェクトを直接送信していたので、これは機能しませんでした。これを解決するために、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フィールドの値を渡していませんでしたされています。そこで、ローカル戦略のコールバック(ユーザー名とパスワードを使用)は呼び出されませんでした。

フィールドを渡さないと、コールバックメソッドが呼び出されず、URL failureRedirectにリダイレクトされます。

関連する問題