Używanie $ window lub $ location do przekierowania w AngularJS

90

Aplikacja, nad którą pracuję, ma różne stany (przy użyciu routera ui), gdzie niektóre stany wymagają zalogowania, inne są publicznie dostępne.

Stworzyłem metodę, która prawidłowo sprawdza, czy użytkownik jest zalogowany, a obecnie mam problemy z przekierowywaniem na naszą stronę logowania, gdy jest to konieczne. Należy zauważyć, że strona logowania nie jest obecnie umieszczona w aplikacji 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");
        }
    });
});

Konsola.log prawidłowo wyświetla zamierzony adres URL. W następnej linii próbowałem praktycznie wszystkiego, od $ window.open do window.location.href i bez względu na to, co próbowałem, przekierowanie się nie dzieje.

EDYTUJ (ROZWIĄZANE):

Znalazłem problem. 

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

Zmienna landingUrl została ustawiona na „domain.com/login”, co nie działało z $ window.location.href (co było jedną z rzeczy, które wypróbowałem). Jednak po zmianie kodu na

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

teraz działa.

javascript angularjs redirect angular-ui-router Thorbjørn Kappel Hansen
źródło
Powinienem prawdopodobnie dodać, że dane są również uwierzytelniane po stronie serwera, więc powyższe uwierzytelnienie nie jest jedynym uwierzytelnieniem, bardziej kwestią wygody jest przekierowanie na stronę logowania, zamiast pokazywania przeważnie pustej strony.
Thorbjørn Kappel Hansen
1
potrzebujesz natywnego locationobiektu używając$window.location=...
charlietfl
Zamiast tego możesz rozważyć uczynienie z tego wszystkiego AngularJS, w tym uwierzytelniania - zobacz ten post frederiknakstad.com/2013/01/21/...
Soren
Plan zakłada, że ​​ostatecznie wszystko (w tym logowanie) będzie zawarte w aplikacji AngularJS, ale ponieważ obecnie przechodzimy na AngularJS, ekran rejestracji / logowania wydaje się być najmniej ważny na tym etapie.
Thorbjørn Kappel Hansen,

Odpowiedzi:

82

Wierzę, że sposobem na to jest $location.url('/RouteTo/Login');

Edytuj dla przejrzystości

Powiedzmy, że moja trasa w widoku logowania to /Login, powiedziałbym, żebym $location.url('/Login')nawigowała do tej trasy.

W przypadku lokalizacji poza aplikacją Angular (tj. Bez zdefiniowanej trasy) będzie działać zwykły stary JavaScript:

window.location = "http://www.my-domain.com/login"
m.casey
źródło
Właśnie tego próbowałem. Niestety, to przekierowuje do www.domain.com/app/RouteTo/login zamiast www.domain.com/login
Thorbjørn Kappel Hansen
Racja, to nie znaczyło być dosłowne. Nie wiem, co zdefiniowałeś jako trasę dla swojego widoku logowania. Umieść tę trasę w argumencie metody $ location.url (). Zredagowałem odpowiedź dla jasności.
m.casey,
Ah, tak. Problem polega na tym, że $ location.url nadal przekierowuje do ścieżki podrzędnej aplikacji. Tak więc użycie $ location.url ('/ login') przekierowuje do www.domain.com/app/login zamiast www.domain.com/login
Thorbjørn Kappel Hansen
1
Cóż, jak stwierdzono w pytaniu, obecnie strona logowania znajduje się poza aplikacją AngularJS. Stąd potrzeba przekierowania na www.domain.com/login zamiast ścieżki w aplikacji.
Thorbjørn Kappel Hansen,
5
Warto również wspomnieć, że prawdopodobnie powinieneś użyć $windowzamiast window(źródło: stackoverflow.com/questions/28906180/… )
Caleb Faruki
39

Wydaje się, że $window.location.hrefpreferowanym sposobem jest przeładowanie całej strony .

Nie powoduje przeładowania całej strony w przypadku zmiany adresu URL przeglądarki. Aby ponownie załadować stronę po zmianie adresu URL, użyj interfejsu API niższego poziomu, $ window.location.href.

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

Diego Ferri
źródło
19

To może ci pomóc! próbny

Przykład kodu 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;
    };
});

Przykład kodu HTML

<div ng-app="urlApp">
    <div ng-controller="urlCtrl">
        Redirect to <a href="#" ng-click="ClickMeToRedirect()">Click Me!</a>
    </div>
</div>
Anil Singh
źródło
3

Nie wiem z jakiej wersji, ale ja używam 1.3.14 i możesz po prostu użyć:

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

Nie ma potrzeby wstrzykiwania $locationani $windoww kontrolerze i nie ma potrzeby pobierania aktualnego adresu hosta.

CularBytes
źródło
-11

Musisz włożyć:

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

W ten sposób funkcja kątowa może uzyskać dostęp do obiektu „okno”

Efrain Luna Villafuerte
źródło
Nie bój się!
Mika