Usando $ ventana o $ ubicación para redireccionar en AngularJS


90

La aplicación en la que estoy trabajando contiene varios estados (usando ui-router), donde algunos estados requieren que inicies sesión, otros están disponibles públicamente.

He creado un método que verifica válidamente si un usuario está conectado, con lo que tengo problemas actualmente es redirigir a nuestra página de inicio de sesión cuando sea necesario. Cabe señalar que la página de inicio de sesión no se encuentra actualmente dentro de la aplicación 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");
        }
    });
});

Console.log muestra la URL deseada correctamente. La línea posterior a eso, he intentado prácticamente todo, desde $ window.open a window.location.href y no importa lo que haya intentado, no ocurre ninguna redirección.

EDITAR (RESUELTO):

Encontré el problema.

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

La variable landingUrl se configuró en 'domain.com/login', que no funcionaría con $ window.location.href (que fue una de las cosas que probé). Sin embargo, después de cambiar el código a

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

ahora funciona.


Probablemente debería agregar que también hay autenticación del lado del servidor en los datos, por lo que la anterior no es la única autenticación, es más una cuestión de conveniencia redirigir a la página de inicio de sesión, en lugar de mostrar una página en su mayoría vacía.
Thorbjørn Kappel Hansen

1
necesita el locationobjeto nativo usando$window.location=...
charlietfl

En su lugar, podría considerar convertirlo todo en AngularJS, incluida su autenticación; consulte esta publicación frederiknakstad.com/2013/01/21/…
Soren

El plan es incluir todo (incluido el inicio de sesión) dentro de la aplicación AngularJS eventualmente, pero como actualmente estamos haciendo la transición a AngularJS, la pantalla de registro / inicio de sesión parece ser la menos importante en esta etapa.
Thorbjørn Kappel Hansen

Respuestas:


82

Creo que la forma de hacer esto es $location.url('/RouteTo/Login');

Editar para mayor claridad

Digamos que mi ruta para mi vista de inicio de sesión era /Login, yo diría $location.url('/Login')que navegara a esa ruta.

Para ubicaciones fuera de la aplicación Angular (es decir, sin ruta definida), el JavaScript antiguo simple servirá:

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

Intenté eso. Desafortunadamente, eso redirige a www.domain.com/app/RouteTo/login en lugar de www.domain.com/login
Thorbjørn Kappel Hansen

Bien, eso no fue una intención literal. No sé qué ha definido como la ruta para su vista de inicio de sesión. Coloque cualquier ruta que pueda ser en el argumento del método $ location.url (). Edité la respuesta para mayor claridad.
m.casey

Ah bien. El problema aquí es que $ location.url todavía redirige a una ruta secundaria de la aplicación. Así, utilizando location.url $ ( '/ login') vuelve a dirigir a www.domain.com/app/login en lugar de www.domain.com/login
Thorbjørn Hansen Kappel

1
Bueno, como se indica en la pregunta, actualmente la página de inicio de sesión se encuentra fuera de la aplicación AngularJS. De ahí la necesidad de redirigir a www.domain.com/login en lugar de una ruta dentro de la aplicación.
Thorbjørn Kappel Hansen

5
También vale la pena mencionar que probablemente debería usar en $windowlugar de window(fuente: stackoverflow.com/questions/28906180/… )
Caleb Faruki

39

Parece que para la recarga de página completa $window.location.hrefes la forma preferida.

No provoca una recarga de página completa cuando se cambia la URL del navegador. Para volver a cargar la página después de cambiar la URL, use la API de nivel inferior, $ window.location.href.

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


19

¡Podría ayudarte! manifestación

Ejemplo de código 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;
    };
});

Ejemplo de código HTML

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

3

No estoy seguro de qué versión, pero yo uso 1.3.14 y puedes usar:

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

No es necesario inyectar $locationni $windowen el controlador y no es necesario obtener la dirección de host actual.


-11

Tienes que poner:

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

De esta manera la función angular puede acceder al objeto "ventana"


¡No tengas miedo!
Mika
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.