Utilisation de $ window ou $ location pour rediriger dans AngularJS

90

L'application sur laquelle je travaille contient différents états (en utilisant ui-router), où certains états exigent que vous soyez connecté, d'autres sont accessibles au public.

J'ai créé une méthode qui vérifie valablement si un utilisateur est connecté, ce avec quoi je rencontre actuellement des problèmes est de rediriger vers notre page de connexion si nécessaire. Il convient de noter que la page de connexion n'est actuellement pas placée dans l'application AngularJS.

app.run(function ($rootScope, $location, $window) {


    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.data.loginReq && !$rootScope.me.loggedIn) {
            var landingUrl = $window.location.host + "/login";
            console.log(landingUrl);
            $window.open(landingUrl, "_self");
        }
    });
});

Le console.log affiche correctement l'URL prévue. La ligne suivante, j'ai essayé pratiquement tout, de $ window.open à window.location.href et peu importe ce que j'ai essayé, aucune redirection ne se produit.

MODIFIER (RÉSOLU):

J'ai trouvé le problème.

var landingUrl = $window.location.host + "/login";
$window.open(landingUrl, "_self");

La variable landingUrl était définie sur «domain.com/login», ce qui ne fonctionnait pas avec $ window.location.href (qui était l'une des choses que j'ai essayées). Cependant, après avoir changé le code en

var landingUrl = "http://" + $window.location.host + "/login";
$window.location.href = landingUrl;

cela fonctionne maintenant.

— Thorbjørn Kappel Hansen
source

Il faudrait probablement ajouter qu'il y a également une authentification côté serveur sur les données, donc ce qui précède n'est pas la seule authentification, c'est plus une question de commodité de rediriger vers la page de connexion, au lieu d'afficher une page presque vide.

— Thorbjørn Kappel Hansen

1

vous avez besoin de l' locationobjet natif en utilisant$window.location=...

— charlietfl

Au lieu de cela, vous pourriez envisager de faire de tout un AngularJS, y compris votre authentification - voir cet article frederiknakstad.com/2013/01/21

— Soren

Le plan est d'inclure tout (y compris la connexion) dans l'application AngularJS à terme, mais comme nous effectuons actuellement la transition vers AngularJS, l'écran d'inscription / de connexion semble être le moins important à ce stade.

— Thorbjørn Kappel Hansen

81

Je crois que la façon de faire est $location.url('/RouteTo/Login');

Modifier pour plus de clarté

Disons que mon itinéraire pour ma vue de connexion était /Login, je dirais $location.url('/Login')de naviguer vers cet itinéraire.

Pour les emplacements en dehors de l'application Angular (c'est-à-dire sans itinéraire défini), l'ancien JavaScript servira:

window.location = "http://www.my-domain.com/login"

— m.casey
source

J'ai juste essayé ça. Malheureusement, cela redirige vers www.domain.com/app/RouteTo/login plutôt que www.domain.com/login

— Thorbjørn Kappel Hansen

Bon, ce n'était pas censé être littéral. Je ne sais pas ce que vous avez défini comme l'itinéraire de votre vue de connexion. Placez quel que soit cet itinéraire dans l'argument de la méthode $ location.url (). J'ai modifié la réponse pour plus de clarté.

— m.casey

Ah c'est vrai. Le problème ici est que $ location.url redirige toujours vers un sous-chemin de l'application. Donc, en utilisant $ location.url ('/ login') redirige vers www.domain.com/app/login plutôt que www.domain.com/login

— Thorbjørn Kappel Hansen

1

Eh bien, comme indiqué dans la question, actuellement, la page de connexion se trouve en dehors de l'application AngularJS. D'où la nécessité de rediriger vers www.domain.com/login plutôt qu'un chemin dans l'application.

— Thorbjørn Kappel Hansen

5

Il convient également de mentionner que vous devriez probablement utiliser à la $windowplace de window(source: stackoverflow.com/questions/28906180/… )

— Caleb Faruki

39

Il semble que le rechargement d'une page complète $window.location.hrefsoit le moyen préféré.

Cela n'entraîne pas un rechargement complet de la page lorsque l'URL du navigateur est modifiée. Pour recharger la page après avoir modifié l'URL, utilisez l'API de niveau inférieur, $ window.location.href.

https://docs.angularjs.org/guide/$location

— Diego Ferri
source

19

Cela pourrait vous aider! démo

Exemple de code AngularJs

var app = angular.module('urlApp', []);
app.controller('urlCtrl', function ($scope, $log, $window) {
    $scope.ClickMeToRedirect = function () {
        var url = "http://" + $window.location.host + "/Account/Login";
        $log.log(url);
        $window.location.href = url;
    };
});

Exemple de code HTML

<div ng-app="urlApp">
    <div ng-controller="urlCtrl">
        Redirect to <a href="#" ng-click="ClickMeToRedirect()">Click Me!</a>
    </div>
</div>

— Anil Singh
source

3

Je ne sais pas de quelle version, mais j'utilise 1.3.14 et vous pouvez simplement utiliser:

window.location.href = '/employee/1';

Pas besoin d'injecter $locationou $windowdans le contrôleur et pas besoin d'obtenir l'adresse actuelle de l'hôte.

— CularBytes
source

-11

Vous devez mettre:

< html ng-app = "urlApp" ng-controller = "urlCtrl">

De cette façon, la fonction angulaire peut accéder à l'objet "fenêtre"

— Efrain Luna Villafuerte
source

N'aie pas peur!

— Mika