J'ai configuré un système d'inscription et de connexion en utilisant passport.js. Et Im en utilisant Angular.js dans le front-end. Mais quand j'utilise angulaire il ne s'inscrit pas mes utilisateurs. Sans angulaire, cela fonctionne bien. Voir le code ci-dessous:La requête POST Angular ne fonctionne pas
sans code angulaire (Il fonctionne):
<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>
avec le code angulaire (ne fonctionne pas):
<!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>
angulaire Code du contrôleur:
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);
});
};
})
La Route Inscription:
// 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
}));
Note:
Dans le backend j'ai une API configuration Node/express.js. En cas d'inscription réussie, il utilise passport.js pour ajouter l'utilisateur dans MongoDB et redirige également l'utilisateur vers la page de profil.
MAIS actuellement les données vont dans la base de données (je peux voir le nouvel utilisateur dans la db) ce ne est pas rediriger l'utilisateur vers la page de profil, ni est-il montrant des messages d'erreur que je Renvoyez (c.-à- si un utilisateur existe déjà)
merci pour la réponse. Pouvez-vous s'il vous plaît fournir un exemple? aussi pourquoi le redirige-t-il avec succès quand je n'utilise pas angulaire? – Skywalker
J'ai mis à jour ma réponse pour expliquer la différence entre les appels ajax et les appels directs au navigateur. – Soviut
merci beaucoup pour l'explication. Avez-vous une chance de fournir un exemple de code de redirection angulaire? – Skywalker