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に追加し、ユーザーをプロフィールページにリダイレクトします。
しかしは、現在のデータがそのプロファイルページにユーザーをリダイレクトしないでも、それは私が返送されたエラーメッセージを示している(私はデシベルで新しいユーザーを見ることができます)データベースに起こっている(つまり、ユーザーが既に存在する場合)
答えてくれてありがとう。あなたは例を挙げていただけますか?なぜ私は角を使わないとうまくリダイレクトするのですか? – Skywalker
私はajax呼び出しと直接のブラウザ呼び出しの違いを説明するために私の答えを更新しました。 – Soviut
ありがとうございます。任意の角度でリダイレクトする方法のコード例を提供できますか? – Skywalker