How to redirect a user in angular.js using access token mechanism?

Question

This is the process flow:

On the front end, the user logs in by providing username and password.
The server will respond a token to the user if the credentials are correct.
Now the user should be redirected to the homepage (PROBLEM HERE). I have set the token in the header by this code: $http.defaults.headers.common['X-Auth-Token'] = token;

Also, when I do a http.get method, I am getting an "OK" response

$http({ method: 'GET',

    url: '/home/',

    headers: {
        'X-Auth-Token': token
    }
}).then(function successCallback(response) {
    console.log(response.statusText);
}

Now, the issue is that when I use $window.location.href = "/home", the server responds "unauthorized token" because the server always expects a token in the header with each request. In the command window.location.href, I cannot set the header.

What is an alternative to redirect the user to the homepage. Assume the server always checks the header for the access token.

Thanks in advance!!!

If i understood u right is the homepage ('/home') not part of your current angular single-page application (u are not setting this route by ngRoute or angular-ui-router)? — MMhunter
– MMhunter, Commented Jul 16, 2016 at 4:17

MMhunter · Accepted Answer · 2016-07-16 08:02:24Z

1

AFAIK if u are using HTTP redirect like setting the window.location.href, there is no way to custom headers. Neither can u do that when using a form post.Use cookies instead for these purpose.

Ajax(XMLhttpRequest) may be the only one that supports setting custom headers.

If u don't mind using angular routing(however doing this may expose some logic in js code which should only be exposed to authenticated user), u may add an resolve for resolveRedirectTo in which make an ajax request to check the authentication status every time route changes.

EDIT

For using angular routing, the basic thinking is to ask user to do send ajax request with custom headers to server to check if he/she is authorized to visit that page. Check out the following code and this fiddle

app
.config(['$routeProvider',function ($routeProvider) {

    $routeProvider.
    when('/home', {
        templateUrl:"home.html" ,
        controller: 'MainController',
        resolve:{
            isLogin:function($q, $http,$location) {
              var deferred = $q.defer();
              //verify the user via an ajax request every time the user attempts to visit `/home`
              //here since u have already set the custom headers for $http upon signing in, the next request will be with the header.
              //the follow test url will return {isLogin:true}
              $http({method: 'GET', url: 'http://echo.jsontest.com/isLogin/true'})
                  .success(function(data) {


                      if(data.isLogin){
                        deferred.resolve(data.isLogin); //  no need to redirect
                      }
                      else{
                        $location.path("/guest");// redirect to guest page if not authorized
                        deferred.reject(); 
                      }
                  })
                  .error(function(data){
                  //error
                      $location.path("/guest");
                      deferred.reject();
                  });

              return deferred.promise;  
          }
        }
    }).
    when("/guest",{
        templateUrl: "guest.html",
      controller: 'GuestController',
    })
    .otherwise({redirectTo:'/guest'})
}]);

edited Jul 16, 2016 at 8:02

answered Jul 16, 2016 at 4:36

MMhunter

1,4511 gold badge12 silver badges18 bronze badges

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

2 Comments

Savvy Over a year ago

Thanks for the answer but I didn't understand much of it. Can you give me any url example that will enable me to visualize this in a better way?

MMhunter Over a year ago

I've updated my answer and hope it will be of some help.

Collectives™ on Stack Overflow

How to redirect a user in angular.js using access token mechanism?

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