Angularjs authentication issue

Question

i'm trying to implement a JWT based authentication in my angularjs app. But i'm struggleing with the request header issues. The thing is that i have a Controller that calls a service, and this one returns a token. This step works fine.

'use strict';

angular.module("home.controllers", ['home.services', 'ngStorage'])

.controller('HomeController', ['$scope', '$location', '$http', '$localStorage', 'HomeService',
function($scope, $location, $http, $localStorage, HomeService) {


    function login(user, password) {

        HomeService.login(user, password).then(

            function(loginResult) {
                var token = loginResult.token;

                if (loged()) {
                    $localStorage.token = token;
                    $http.defaults.headers.common.Authorization = 'Bearer ' + token;
                    console.log($location.path('secure/index'));
                    $location.path('secure/index');
                }
            },

            function(err) {
                console.error(err);
            }
        );
    }

    function loged() {
        return $scope.token !== null;
    }

    return {

        loged: function() {
            return loged();
        },

        login: function(user, password)) {
        return login(user, password)
    }
};

}]);

But the thing is that I would like to redirect the user after login to "secure/index" with the "Authentication" header in the request because I have a Spring filter checking all the "*/secure" paths have that header.

The main app.js is the following

'use strict';

angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate', 'ui.bootstrap', 'ngStorage'])

.config(['$stateProvider', '$translateProvider', '$urlRouterProvider',
    function($stateProvider, $translateProvider, $urlRouterProvider) {

        $translateProvider.useUrlLoader("home/mensajes");
        $translateProvider.useStorage("UrlLanguageStorage");
        $translateProvider.preferredLanguage("en");
        $translateProvider.fallbackLanguage("en");

        $stateProvider
            .state("home", {
                url: "/",
                templateUrl: "resources/js/home/views/home/home.html",
                controller: "HomeController"
            });

        $stateProvider
            .state("contacto", {
                url: "/contacto",
                templateUrl: "resources/js/home/views/contact/contac.html",
                controller: "HomeController"
            });
    }
])

.run(['$localStorage', '$http', function($localStorage, $http) {

    if ($localStorage.token) {
        $http.defaults.headers.common.Authorization = 'Bearer ' + $localStorage.token;
    }
}]);

The thing is that it doesnt redirect the page. Instead of $location i tried with $window.href and it redirect the page succesfully but with no auth header in the request.

Any ideas/suggestions for that? note that I'm a begginer in Angularjs so probably there are more things wrong.

Thanks in advance

pgreen2 · Accepted Answer · 2016-11-01 01:44:16Z

1

It looks like once you have your token, you are redirecting to secure/index with $location.path('secure/index');. However, the example code you have doesn't show a state that maps to secure/index.

answered Nov 1, 2016 at 1:44

pgreen2

3,6713 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

txomin Over a year ago

And excuse me, would you also tell me why do i need to write that thing on the . run of my module?

pgreen2 Over a year ago

Upon a successful log in, the code is storing the token on the localStorage: $localStorage.token = token;. Local Storage persists across multiple page loads. The run block is checking to see if there was any previous token and using it. $http.defaults.headers.common.Authorization = 'Bearer ' + $localStorage.token; sets the authorization header for each http request. With out this line, you would have to set the authorization header manually for each request you sent to the server.

Collectives™ on Stack Overflow

Angularjs authentication issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related