9
votes

Méthode correcte pour rediriger de $ http.post en angularjs

Pouvez-vous me dire quel est le moyen correct de rediriger vers une autre page si http.post renvoie un code d'erreur spécifique.

Juste pour ajouter du contexte, je souhaite rediriger vers une autre page si l'utilisateur n'est pas connecté. ou autorisé à utiliser l'API. P>

  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);
         })
              .error(function (error) {
                 deferred.reject(error);
              });

     return deferred.promise;
  }


3 commentaires

une page ou un itinéraire? Si c'est une page, un redirect Vanilla Javascript fonctionnera.


@Ronnie à une page.


Je pense que la question est une sorte de duplicata de Stackoverflow.com/Questtions/11541695/... . Vous devriez utiliser Emplacement Service docs.angularjs.org/ API / NG / Service / $ Lieu . C'est $ emplacement.path ('/ login'); par exemple.


7 Réponses :


3
votes

Vous pouvez faire une redirection à la page à l'aide de $ window.location.href, en fonction de la condition d'erreur que vous avez.

p>

<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>


4 commentaires

Puis-je juste avoir un autre avec repored.Reject (erreur); après la fenêtre $.Location.href?


Je ne comprends pas ce que tu veux dire? Pouvez-vous élaborer s'il vous plaît?


Donc, pour une erreur spécifique, je veux "rediriger". Mais pour tous les autres, je veux reporter.Reject (erreur); Ça marchera?


C'est exactement ce que j'ai dans le code d'erreur de code à 400 dans le contrôleur .Then méthode. Habituellement, les services ne sont pas destinés à diverger sur la réponse qu'elle reçoit. La responsabilité des services est de faire un appel et de retourner. Il appartient au contrôleur de lire et de décider quoi faire avec les données qu'il a reçues. Ce faisant, vos services sont indépendants et peuvent être réutilisés. Sinon, un service particulier ne fonctionnera que couplé avec un contrôleur qui n'est pas conseillé.



2
votes

Tout d'abord une belle question, dans ce scénario, vous pouvez utiliser $ Emplacement strong>, $ State fort> S'il s'agit d'une URL externe, vous pouvez utiliser $ window.location.href .. . Je recommanderais $ Emplacement et c'est le meilleur moyen ...

Veuillez consulter le lien pour plus tard Utilisation de $ window ou $ Emplacement pour rediriger dans Angularjs P>

    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;
      }


0 commentaires

3
votes

Le meilleur moyen d'attraper Global authentificationError code> en angulaire est avec intercepteur. De cette façon, vous pouvez surveiller toutes les demandes envoyées à partir d'angular et de vérification de authentificationOrror code>.

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

        //check for auth error

        $location.path('/login');

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


0 commentaires

2
votes

Le $ http.post est erroné. Jusqu'à présent, la meilleure réponse est @ Kliment's. Les intercepteurs sont le meilleur moyen de gérer ce qui vient avant et après les demandes HTTP.

Toutefois, si votre objectif final est d'empêcher l'accès à une page, vous devez au moins utiliser un plugin de routage (ngroute , ui-routeur ) car avec l'idée de promesse, il y aura toujours un retard entre la requête HTTP et la réponse.

Selon le temps de réponse du serveur, vous verrez toujours l'affichage de la page pendant environ une seconde ou plus.

avec UI-routeur, vous configurez simplement un < un href = "https://u-router.github.io/docs/0.3.1/#/api/ui.router.util.%24Resolve" rel = "nofollow"> résolve méthode pour chaque état vous voulez protéger. Cela pourrait ressembler à ceci: xxx

LogNDIn fait référence à une fonction que vous définissez qui contient votre appel http.post (ou meilleur encore un service) xxx

voici ce service particulier renvoie un statut 401 mais vous pouvez retourner n'importe quoi.

L'état ne sera pas résolu (et la page non affichée) jusqu'à ce que Il est accepté ou rejeté.

Vous pouvez rediriger directement de là si vous le souhaitez, bien que ce ne soit pas très élégant. ui-routeur vous donne une autre option avec la redirection par défaut: xxx

avec sinon vous indiquez ui-routeur d'aller à certaines URL si aucun État n'existe pour Une demande particulière ou si une résolution a été rejetée.

sur un autre sujet, votre demande http est mal écrite.

.Success et error sont obsolètes et vous n'avez pas besoin de créer un Promise ( $ q ) sur une demande HTTP $ qui renvoie déjà une promesse.

Vous avez un bon exemple dans la documentation liée ci-dessus.


0 commentaires

3
votes

Exemple:

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


0 commentaires

3
votes

Utilisez un service d'intercepteur afin de centraliser toute votre demande de rejet dans le même service.

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;
}]);


0 commentaires

2
votes

Vous pouvez rediriger vers la page sur un accès non autorisé d'un utilisateur basé sur le code d'état que vous pouvez revenir de votre appel d'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";
    }
});


0 commentaires