2016-12-10 9 views
1

passport.jsを使ってサインアップとログインシステムをセットアップしました。 Angular.jsをフロントエンドで使用しています。しかし、角度を使用すると、ユーザーにサインアップすることはありません。角張っていないとうまくいく。Angular POSTリクエストが機能しない

アンギュラコードで
<form action="/signup" method="post"> 
    <div class="form-group"> 
     <label>Email</label> 
     <input type="text" class="form-control" name="email"> 
    </div> 
    <div class="form-group"> 
     <label>Password</label> 
     <input type="password" class="form-control" name="password"> 
    </div> 

    <button type="submit" class="btn btn-warning btn-lg">Signup</button> 
</form> 

(動作しない)::(それが動作する)アンギュラコードなし

:以下のコードを参照してください

<!doctype html> 
<html ng-app="login"> 

<head> 
<title>Node Authentication</title> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script> 

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
<!-- load bootstrap css --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> 
<!-- load fontawesome --> 
<script src="./javascripts/controllers/signup.js"></script> 
<style> 
    body { 
     padding-top: 80px; 
    } 
</style> 
</head> 

<body ng-controller="loginCtrl"> 
<div class="container"> 

    <div class="col-sm-6 col-sm-offset-3"> 

     <h1><span class="fa fa-sign-in"></span> Signup</h1> 

     <!-- show any messages that come back with authentication --> 
     <% if (message.length> 0) { %> 
      <div class="alert alert-danger"> 
       <%=m essage %> 
      </div> 
      <% } %> 

       <!-- LOGIN FORM --> 
       <form> 
        <div class="form-group"> 
         <label>Email</label> 
         <input type="text" class="form-control" ng-model="user.email"> 
        </div> 
        <div class="form-group"> 
         <label>Password</label> 
         <input type="password" class="form-control" ng-model="user.password"> 
        </div> 

        <button ng-click="signup()" class="btn btn-warning btn-lg">Signup</button> 
       </form> 

       <hr> 

       <p>Already have an account? <a href="/login">Login</a> 
       </p> 
       <p>Or go <a href="/">home</a>.</p> 

    </div> 

</div> 

角度コントローラコード:

var login = angular.module('login', []) 

login.controller('loginCtrl', function($scope,$http){ 

$scope.user = {}; 

$scope.signup = function(){ 

    return $http.post('/signup',$scope.user) 
    .then(function(data) { 
    console.log("da" + data); 
}); 
}; 

}) 

申し込みルート:

// process the signup form 
app.post('/signup', passport.authenticate('local-signup', { 
    successRedirect : '/profile', // redirect to the secure profile section 
    failureRedirect : '/signup', // redirect back to the signup page if there is an error 
    failureFlash : true // allow flash messages 
})); 

注:バックエンドで

私はセットアップノード/ Express.jsのAPIをしました。登録に成功すると、passport.jsを使用してユーザーをMongoDBに追加し、ユーザーをプロフィールページにリダイレクトします。

しかしは、現在のデータがそのプロファイルページにユーザーをリダイレクトしないでも、それは私が返送されたエラーメッセージを示している(私はデシベルで新しいユーザーを見ることができます)データベースに起こっている(つまり、ユーザーが既に存在する場合)

答えて

0

AJAXリクエストはブラウザをリダイレクトしません。新しいページにリダイレクトしたい場合は、APIからの応答が成功した後に角度ルータに指示する必要があります。角型ルータを使用していない場合は、window.locationをリダイレクトするだけです。

return $http.post('/signup',$scope.user) 
    .then(function(data) { 
     console.log("da" + data); 
     window.location.href = '/profile'; 
    }); 

/signupは、本質的にAPIであるエンドポイントです。それを呼び出すことはファッションでリダイレクトされますが、それは応答に関してのみ行います。あなたのAngularアプリはリダイレクトからの応答を受信しますが、ブラウザ自体はリダイレクトされません。ブラウザからそのURLに直接投稿すると、リダイレクトされますが、AJAX呼び出しで行われたHTTPルーティングはブラウザに直接影響しません。

+0

答えてくれてありがとう。あなたは例を挙げていただけますか?なぜ私は角を使わないとうまくリダイレ​​クトするのですか? – Skywalker

+0

私はajax呼び出しと直接のブラウザ呼び出しの違いを説明するために私の答えを更新しました。 – Soviut

+0

ありがとうございます。任意の角度でリダイレクトする方法のコード例を提供できますか? – Skywalker

関連する問題