6

I am developing a login application, in which I have angular communicating with REST interface for authenticating a user. I am usin $http for this task. Now, I need to redirect my page to another URL(this may be on same or different domain). Also, I need to set the headers during this process.

Please help me with an implementation in order to proceed with this task.

James Drinkard
  • 15,342
  • 16
  • 114
  • 137
Jaspreet
  • 101
  • 1
  • 5

3 Answers3

5

1) AngularJs was designed to build SPAs, you should not redirect to another url. You should redirect to another path in your current page instead. If you are using angular router, you would redirect to another state. Take a look at this for more information: single page application deep linking with login page

2) Because the browser automatically handles 302 responses and forces your ajax function to send another ajax request to the Location to retrieve the final result with status 200. Your server should return 401 instead when the user is not authorized. Cannot handle 302 redirect in ajax and why?

A sample code on client side to handle 401 status code (Unauthorized):

$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ 
    if (error.status == 401) { // check for 401 status code
        $state.transitionTo("login", { returnUrl: $location.url() });
    }
})

Another sample code with $http, I recommend doing it globally inside interceptors

$httpProvider.interceptors.push(function($q, $location) {
    return {
      'responseError': function(response) {
         if(response.status === 404){
             $location.path('your redirection path');
         }
         return $q.reject(response);
      }
    };
  });

3) In order to set your request headers, you could set it globally in your $httpProvider.defaults.headers or per request

Community
  • 1
  • 1
Khanh TO
  • 48,509
  • 13
  • 99
  • 115
  • Hello Khanh TO, in my case I need to redirect to another domain after the user has successfully logged in. Presently my code looks like: – Jaspreet Mar 22 '14 at 21:21
  • $scope.createUser = function() { $http({ method: 'POST', url: '/ang/rest/login/authenticate', headers: {'Content-Type': 'application/json'}, data: $scope.user }).success(function ($location,$http) { $http({ method:'GET', url:'http://google.com', headers:{'Authorization': 'Basic dGVzdDp0ZXN0'} }) – Jaspreet Mar 22 '14 at 21:24
  • @Jaspreet: if you need to redirect to other domain, handle 401 and use `window.location.href`, the key is you must handle 401 instead of 302 when using ajax. To redirect in the same page, just use $state or $location – Khanh TO Mar 23 '14 at 01:55
-3

Have you considered reading the Angular documentation / API?

Use the $location service for redirect and read the $http docs in order to learn how to set headers.

Quote:

the $http service will automatically add certain HTTP headers to all requests. These defaults can be fully configured by accessing the $httpProvider.defaults.headers configuration object [...]

It is unlikely that anyone of the SO community will provide a complete guide to your question, as the needed information is easyily accesible.

Wottensprels
  • 3,307
  • 2
  • 29
  • 38
  • But what if you need to redirect to another page in another server with some specific headers? I know you can add the headers to the `$http` request, but how to do it in the redirect `$location`? – Coyolero Jul 29 '15 at 21:21
  • 1
    @Coyolero I'd say that this is beyond Angular's purpose. The $location service is emant to parse an URL and make it available to your application. Redirecting to another server with specific headers can (and should IMO) be done without relying on Angular. This is merely my own opinion, though. – Wottensprels Jul 30 '15 at 10:55
-3

If you need to go to another page, use straight java script

window.location.href=......

Jason
  • 15,915
  • 3
  • 48
  • 72