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.

javascript angularjs redirect angular-ui-router Thorbjørn Kappel Hansen
la 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

Réponses:

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
la 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
la 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
la 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
la 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
la source
N'aie pas peur!
Mika