redirection d’une page avec un routage angular après avoir appelé avec succès une api sur un serveur express

Dans une application à une seule page utilisant un routage angular, comment puis-je redirect une page après un appel à l’API? Dans mon cas, je souhaite redirect l’utilisateur vers la page de profil après avoir appelé l’api de connexion. C’est donc ce que je pensais qui fonctionnerait mais ce n’est pas le cas.

Sur le client, main.js. J’ai le routage angular mis en place

app.config(function($routeProvider){ $routeProvider //the home page display .when('/', { templateUrl: 'main.html', controller: 'mainController' }) .when('/login', { templateUrl: 'login.html', controller: 'loginController' }) .when('/signUp', { templateUrl: 'signUp.html', controller: 'signUpController' }) .when('/profile', { templateUrl: 'profile.html', //controller: 'mainController' }); });

et de mon contrôleur j’appelle le / login post api

 app.controller('authController', function($scope, $http, $rootScope, $location){ $scope.user = {username: '', password: ''}; $scope.error_message = ''; $scope.login = function(){ $http.post('/login', $scope.user).success(function(data){ if(data.state == 'success'){ //set username authenticated property to true after successful log in //I am only pasting some of my code here, more logic before controller $rootScope.authenticated = true; $rootScope.current_user = "james"; $location.path('/profile'); } else{ $scope.error_message = data.message; } }); }; });

et voici mon api de connexion

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

et quand il réussit, il appelle success qui renvoie les données qui devraient déclencher le rappel dans $ http.post et redirect la page via $ location.path (‘/ profile’) ;. Cependant, le rappel n’est pas appelé et ma page affiche les informations sur l’utilisateur de res.send.

 //sends successful login state back to angular router.get('/success', function(req, res){ res.send({state: 'success', user: req.user ? req.user : null}); });

Suis-je sur la bonne voie? Je ne fais que suivre le tutoriel de microsoft https://www.microsoftvirtualacademy.com/en-us/cours-training/mean-stack-jump-start-8442 mais leur page complète sur github ne fonctionne même pas, donc cela n’aide pas. moi déboguer ce problème de la mienne.

L’utilisation de successRedirect et de failureRedirect dans passeport redirecta le client vers les pages spécifiées, ce qui empêchera l’acheminement de votre angularJS côté client. La raison pour laquelle vous voyez les informations de l’utilisateur après la connexion est que votre client est redirigé vers la page /success , plutôt que de répondre à la demande d’origine. Le client extrait ensuite la page de réussite avec une demande GET, puis la nouvelle demande GET reçoit une réponse avec les informations de l’utilisateur.

Je suggérerais de ne pas utiliser les redirections de node.js lors de l’utilisation d’AngularJS, car vous souhaiterez probablement gérer la redirection côté client:

 router.post('/login', passport.authenticate('local-login'), function(req, res){ res.send(req.user); });

La fonction en ligne ne sera jamais exécutée si l’utilisateur n’est pas authentifié. Au lieu de cela, le passeport répondra directement avec un statut d’erreur 401, avec un corps “Non autorisé”. Par conséquent, l’état de success n’est pas requirejs. Côté client, vous devriez utiliser la fonction .error() pour traiter les erreurs 401, plutôt que de vérifier votre variable d’état:

 $http.post('/login', $scope.user).success(function(user){ $rootScope.authenticated = true; $rootScope.current_user = "james"; $location.path('/profile'); }) .error(function(err){ $scope.error_message = err; });

Si vous souhaitez renvoyer une raison plus précise expliquant pourquoi la demande n’a pas été autorisée (ce qui n’est pas toujours une bonne idée), vous pouvez utiliser des messages flash et émettre une autre demande GET d’angular pour obtenir un message d’échec d’autorisation plus détaillé.

Vous semblez avoir un léger décalage d’impédance sur ce que le serveur frontal et le serveur principal veulent faire ici. Votre code AngularJS s’attend à effectuer un test POST sur le sharepoint terminaison de l’API et à récupérer 200 (succès) avec des données JSON indiquant le succès ou l’échec de la tentative de connexion.

Le back-end pense qu’il va recevoir un POST puis redirect l’appelant vers un nouvel emplacement. Au moins c’est comme ça que je le lis. Il ne s’agit pas simplement de renvoyer des données avec un code de réponse HTTP de 200 ou un code d’erreur.

Je pense que vous souhaitez modifier le code d’arrière-plan pour simplement renvoyer les données au système d’avant pour obtenir le résultat que vous attendez.

Jusqu’à présent, je n’ai pas réussi à faire des appels Ajax à l’API redirigée vers une page. Nous avons une situation similaire où un appel API peut entraîner une redirection vers une page d’erreur. Nous voulions gérer cela sur le serveur plutôt que de demander à UI (Angular) de le faire. Mais il est simplement frustrant de ne voir aucune des méthodes de redirection comme res.redirect fonctionner. Notre scénario est que Angular effectue un appel d’API via Ajax et que l’API s’exécutant sur Node.js doit être redirigée vers une page HTML.