Verwenden von $ window oder $ location zum Umleiten in AngularJS

90

Die App, an der ich arbeite, enthält verschiedene Status (mithilfe des UI-Routers). In einigen Status müssen Sie angemeldet sein, in anderen sind sie öffentlich verfügbar.

Ich habe eine Methode erstellt, die überprüft, ob ein Benutzer angemeldet ist. Derzeit habe ich Probleme damit, bei Bedarf tatsächlich auf unsere Anmeldeseite umzuleiten. Es ist zu beachten, dass die Anmeldeseite derzeit nicht in der AngularJS-App platziert ist.

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

Das console.log zeigt die beabsichtigte URL korrekt an. In der Zeile danach habe ich praktisch alles von $ window.open bis window.location.href ausprobiert und egal was ich versucht habe, es findet keine Umleitung statt.

BEARBEITEN (BEHOBEN):

Fand das Problem. 

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

Die Variable landingUrl wurde auf 'domain.com/login' gesetzt, was mit $ window.location.href nicht funktionieren würde (was eines der Dinge war, die ich versucht habe). Allerdings nach dem Ändern des Codes auf

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

es funktioniert jetzt.

javascript angularjs redirect angular-ui-router Thorbjørn Kappel Hansen
quelle
Sollte wahrscheinlich hinzugefügt werden, dass die Daten auch serverseitig authentifiziert sind, so ist dies nicht die einzige Authentifizierung. Es ist eher eine Frage der Bequemlichkeit, zur Anmeldeseite umzuleiten, anstatt eine größtenteils leere Seite anzuzeigen.
Thorbjørn Kappel Hansen
1
Sie benötigen das native locationObjekt mit$window.location=...
charlietfl
Stattdessen könnten Sie in Betracht ziehen, alles zu einem AngularJS zu machen, einschließlich Ihrer Authentifizierung - siehe diesen Beitrag frederiknakstad.com/2013/01/21/…
Soren
Es ist geplant, alles (einschließlich der Anmeldung) irgendwann in die AngularJS-App aufzunehmen. Da wir derzeit den Übergang zu AngularJS vornehmen, scheint der Registrierungs- / Anmeldebildschirm in dieser Phase am wenigsten wichtig zu sein.
Thorbjørn Kappel Hansen

Antworten:

81

Ich glaube, der Weg dazu ist $location.url('/RouteTo/Login');

Aus Gründen der Übersichtlichkeit bearbeiten

Angenommen, meine Route für meine Anmeldeansicht war /Login, ich würde sagen $location.url('/Login'), um zu dieser Route zu navigieren.

Für Standorte außerhalb der Angular-App (dh keine Route definiert) wird einfaches altes JavaScript bereitgestellt:

window.location = "http://www.my-domain.com/login"
m.casey
quelle
Hab das gerade versucht. Leider leitet das zu www.domain.com/app/RouteTo/login weiter und nicht zu www.domain.com/login
Thorbjørn Kappel Hansen
Richtig, das sollte nicht wörtlich sein. Ich weiß nicht, was Sie als Route für Ihre Anmeldeansicht definiert haben. Fügen Sie die beliebige Route in das Argument für die Methode $ location.url () ein. Ich habe die Antwort aus Gründen der Klarheit bearbeitet.
m.casey
Ah richtig. Das Problem hierbei ist, dass $ location.url immer noch zu einem Unterpfad der App umleitet. Wenn Sie also $ location.url ('/ login') verwenden, werden Sie zu www.domain.com/app/login anstatt zu www.domain.com/login weitergeleitet
Thorbjørn Kappel Hansen
1
Wie in der Frage angegeben, befindet sich die Anmeldeseite derzeit außerhalb der AngularJS-App. Daher muss nicht auf einen Pfad innerhalb der App, sondern auf www.domain.com/login umgeleitet werden.
Thorbjørn Kappel Hansen
5
Es ist auch erwähnenswert, dass Sie wahrscheinlich $windowanstelle von window(Quelle: stackoverflow.com/questions/28906180/… )
Caleb Faruki
39

Es scheint, dass für das vollständige Laden $window.location.hrefder Seite der bevorzugte Weg ist.

Es wird kein erneutes Laden der gesamten Seite verursacht, wenn die Browser-URL geändert wird. Verwenden Sie die untergeordnete API $ window.location.href, um die Seite nach dem Ändern der URL neu zu laden.

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

Diego Ferri
quelle
19

Es könnte dir helfen! Demo

AngularJs Codebeispiel

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

HTML-Codebeispiel

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

Ich bin mir nicht sicher ab welcher Version, aber ich verwende 1.3.14 und Sie können einfach Folgendes verwenden:

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

Keine Notwendigkeit zu injizieren $locationoder $windowin den Controller und keine Notwendigkeit, die aktuelle Host-Adresse zu erhalten.

CularBytes
quelle
-11

Sie müssen sagen:

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

Auf diese Weise kann die Winkelfunktion auf ein "Fenster" -Objekt zugreifen

Efrain Luna Villafuerte
quelle
Hab keine Angst!
Mika