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
Post a Comment