Prawidłowa metoda przekierowania z $ http.post w angularjs

Question

Czy możesz mi powiedzieć, jaki jest prawidłowy sposób przekierowania na inną stronę, jeśli $ http.post zwraca określony kod błędu.

Aby dodać kontekst, chcę przekierować na inną stronę, jeśli użytkownik nie jest zalogowany lub nie jest uprawniony do korzystania z interfejsu API.

Answer 1

$ http.post to błąd. Jak dotąd najlepszą odpowiedzią jest @ Kliment's. Interceptory to najlepszy sposób zarządzania treścią przed i po żądaniach HTTP.

Jednakże, jeśli końcowy celem jest, aby uniemożliwić dostęp do strony, trzeba przynajmniej użyć wtyczki routingu (ngRoute, ui-router) ze względu na pomysł obietnicy zawsze będzie opóźnienie między żądanie HTTP i odpowiedź.

W zależności od czasu reakcji serwera, strona będzie wyświetlana przez około sekundę.

Z routerem ui po prostu skonfiguruj metodę resolve dla każdego stanu, który chcesz chronić. To może wyglądać następująco:

.state('protected', 
{ 
    url : '/protected_page', 
    templateUrl : 'secret.html', 
    resolve: { 
     loggedin: loggedin 
    } 
}) 

loggedin odnosi się do funkcji można zdefiniować, który zawiera $ wezwanie http.post (lub jeszcze lepiej usługa)

function loggedin($timeout, $q, $location, loginService) { 
    loginService.then(function(data) { 
     if(data.status == 401) { 
      //$timeout(function() { $location.path('/login'); }); 
      return $q.reject(); 
     } else { 
      return $q.when(); 
     } 
    }); 
} 

Tutaj ta konkretna usługa zwraca Status 401, ale możesz zwrócić wszystko.

Stan nie zostanie rozwiązany (a strona nie zostanie wyświetlona), dopóki nie zostanie zaakceptowana lub odrzucona.

Możesz przekierować bezpośrednio stamtąd, jeśli chcesz, chociaż nie jest to zbyt eleganckie. ui-Router daje inną opcję z domyślnej przekierowanie:

if (tokenIsValid()) 
    $urlRouterProvider.otherwise("/home"); 
else 
    $urlRouterProvider.otherwise("/login"); 

Z inaczej powiedzieć UI-router, aby przejść do niektórych adresów URL, jeśli nie istnieje państwo dla danego wniosku lub jeżeli postanowienie zostało odrzucone.

Na inny temat, twój http request jest źle napisany.

.success i .error są przestarzałe i nie trzeba stworzyć obietnicę ($ q) nad żądania $ http że sama już wraca obietnicę.

Masz dobry przykład w dokumentacji powiązanej powyżej.

Answer 2

Możesz wykonać przekierowanie do strony za pomocą $ window.location.href, na podstawie stanu błędu, który masz.

var app = angular.module("sampleApp", []); 
 

 
app.controller("sampleController", [ 
 
    "$scope", 
 
    '$window', 
 
    'sampleService', 
 
    function($scope, $window, sampleService) { 
 
    sampleService.getData().then(function(result) {}, function(error) { 
 
     if (error.statusCode === 400) { 
 
     alert("Error"); 
 
     $window.location.href = "http://stackoverflow.com" 
 
     } 
 
    }); 
 
    } 
 
]); 
 
app.service("sampleService", function() { 
 
    this.getData = function() { 
 
    var promise = new Promise(function(resolve, reject) { 
 
     setTimeout(function() { 
 
     reject({ 
 
      statusCode: 400 
 
     }); 
 
     }, 1000); 
 
    }); 
 
    return promise; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-App="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    </div> 
 
</div>

Answer 3

Przede wszystkim Nicea pytanie W tym scenariuszu można użyć $ lokalizację, $ stan Jeśli jest zewnętrzny url można użyć $ window.location.href .. . polecam $ lokalizację i jest to najlepszy sposób ...

Proszę Patrz odnośnik do dalszego Using $window or $location to Redirect in AngularJS

function getData(filter) { 
     var deferred = $q.defer(); 
     var data = JSON.stringify(filter); 



    $http.post('/myapp/api/getData', data) 
      .success(function (data, status, headers, config) { 
       deferred.resolve(data); 

if(data.errorcode==9999) // Define Your Error Code in Server 
{ 

    $location.path('/login'); // You Can Set Your Own Router 

}    }) 
        .error(function (error) { 

    $location.path('/login'); // You Can Set Your Own Router 
        deferred.reject(error); 
        }); 

     return deferred.promise; 
     } 

Zaleca się stosowanie $ lokalizację lub $ stan ...

Answer 4

Najlepszym sposobem, aby złapać globalnego AuthenticationError w kątowej z kolektora. W ten sposób można monitorować wszystkie żądania wysyłane z kątowych i sprawdzać pod kątem AuthenticationError.

$provide.factory('AuthErrorInterceptor', function($q, $location) { 
    return { 
    'responseError': function(rejection) { 

     //check for auth error 

     $location.path('/login'); 

     return $q.reject(rejection); 
    } 
    }; 
}); 

Answer 5

Przykład:

$http.post('/myapp/api/getData', data) 
    .then(function (data) { 
     if(data.ErrorCode==1) 
     { 
      $window.location.href="controllerName/actionName"; 
     } 
    }) 

Answer 6

Użyj usługę przechwytywania aby scentralizować wszystkie żądania odrzucenia w tej samej usługi.

module.config(['$httpProvider', ($httpProvider: ng.IHttpProvider) => { 
    $httpProvider.interceptors.push('errorService'); 
}]); 


module.factory('errorService', ['$location', function($location) { 
    var errorService = { 
     responseError: function(rejection) { 
      if (rejection === '401') { 
       $location.path('/login'); 
      } 
     } 
    }; 
    return errorService; 
}]); 

Answer 7

Możesz przekierować na stronę przy nieautoryzowanym dostępie użytkownika w oparciu o kod stanu, który możesz zwrócić z połączenia API.

$http({ 
method: "POST", 
url: 'Api/login', 
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} 
}).success(function (data,status) { 
if(status==200){ 
    alert('Successfully logged in'); 
    $location.path('/dashboard'); //You can use this if you are defined your states. 
} 
}).error(function (data,status) { 
    if(status==403||status==403){ //Based on what error code you are returning from API 
    $location.path('/login');// if states are defined else 
    $window.location.href = "https://www.google.com"; 
    } 
});