AngularJs route authentication

Question

The problem is that I would like to restrict access to specific routes and show login page if user does not have valid JWT. I just wanna tell that I'm very new in AngularJs and NodeJs. So in short I have

LoginCtrl:

$scope.login = function(username, password){

UserSvc.login(username, password)
.then(function(response){
    $scope.$emit('login', response.data );
    $window.location.href = '#/';
}, function(resp){
    $scope.loginError = resp.data.errors;
});     
}

I rise an event, in ApplicationCtrl the event is catched by this

$scope.$on('login', function(_, user){
    $scope.currentUser = user
})

Which is cool and it's working perfect, the problem is that I have some routes in my route.js, on which I would like to have some validation.

$routeProvider
.when('/', {controller:'PostsCtrl', templateUrl: 'posts.html'})
.when('/register', {controller:'RegisterCtrl', templateUrl: 'register.html'} )
.when('/login', {controller:'LoginCtrl', templateUrl: 'login.html'} )
.otherwise({redirectTo: '/login'});

In nodejs I can easy put a middleware, but how can I do that in AngularJs. So now what's is happening is that when I land on the page I can press login. It's redirects me to login page, then When I press Posts, Nodejs returns 401 because I don't have valid JWT, but that is shown only in the console. AngulrJs doesn't do anything.

The answer you are looking for is interceptors. Check this module for angular. github.com/witoldsz/angular-http-auth it catches the error 401 from the server and gives you the option do smt with it. — AndrasCsanyi
– AndrasCsanyi, Commented Sep 20, 2015 at 12:36

Moncef Hassein-bey · Accepted Answer · 2015-09-20 13:52:34Z

1

As @SayusiAndo pointed out you need :

http interceptor that will catch the 401 status, from you node server.
and, then redirect the user to /login route if not logged in.
Also, you should send your jwt token (that you should store), using the same interceptor.

Http interceptor :

app.factory('AuthInterceptor', function ($window, $q) {
return {
    request: function(config) {
        var token = $window.localStorage.getItem('token');
        if(token){
            config.headers.Authorization = 'Bearer ' + token;
        }

        return config;
    },
    response: function(response) {
        if (response.status === 401) {
            // redirect to login.
        }
        return response || $q.when(response);
    }
};
});

// Register the AuthInterceptor.
app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
});

answered Sep 20, 2015 at 13:52

Moncef Hassein-bey

1,3619 silver badges14 bronze badges

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

1 Comment

Alex Over a year ago

Thank you for this answer, just one thing 401 doesn't seems to come in response, I was able to accessed in responseError instead.

Ashutosh Upadhyay · Accepted Answer · 2015-09-20 12:37:19Z

0

You can use $routeChangeStart event which is fired every time angular enters a route. Attach a handler to this event and in the handler do the validation you need to and if it fails, redirect user.

https://docs.angularjs.org/api/ngRoute/service/$route

answered Sep 20, 2015 at 12:37

Ashutosh Upadhyay

4913 silver badges6 bronze badges

Collectives™ on Stack Overflow

AngularJs route authentication

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related