angularjs - redirecting a page with angular routing after successfully calling an api on express server -


in single page application using angular routing, how can redirect page after api call. in case, want redirect user profile page after have called login api. thought work isn't.

on client, main.js. have angular routing set up

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' }); }); 

and controller call /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 true after successful log in         //i pasting of code here, more logic before controller         $rootscope.authenticated = true;         $rootscope.current_user = "james";         $location.path('/profile');       }       else{         $scope.error_message = data.message;       }     });      };  }); 

and here login api

router.post('/login', passport.authenticate('local-login', {         successredirect : '/success', // redirect secure profile section         failureredirect : '/failure', // redirect signup page if there error         failureflash : true // allow flash messages     })); 

and when succeeds, calls success sends data should trigger callback in $http.post , redirect page through $location.path('/profile');. however, callback isn't called , page displays user information res.send

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

am on right track? following microsoft's tutorial https://www.microsoftvirtualacademy.com/en-us/training-courses/mean-stack-jump-start-8442 completed page on github doesn't work doesn't me debug problem of mine.

using successredirect , failureredirect in passport redirect client specified pages, prevent client-side angularjs routing taking place. reason you're seeing user info after logging in because client being redirected /success page, rather responding original request. client fetches success page request, , new request responded user info.

i suggest leaving node.js redirects out when using angularjs, since want handle redirection on client side:

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

the inline function never execute if user not authenticated. instead, passport respond directly 401 error status, body of "unauthorized". therefore success state not required. on client side, should use .error() function deal 401 errors, rather checking state variable:

$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;   }); 

if want pass more specific reason why request unauthorized (which not idea), can use flash messages, , issue request angular more detailed authorization failure message.


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -