Usando $ window ou $ location para redirecionar em AngularJS

90

O aplicativo no qual estou trabalhando contém vários estados (usando ui-router), em que alguns estados exigem que você esteja conectado, outros estão disponíveis publicamente.

Eu criei um método que verifica validamente se um usuário está logado, o que estou tendo problemas atualmente é redirecionar para nossa página de login quando necessário. Deve-se observar que a página de login não está colocada no aplicativo 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");
        }
    });
});

O console.log mostra o url pretendido corretamente. Na linha seguinte, tentei praticamente tudo, de $ window.open a window.location.href e não importa o que eu tentei, nenhum redirecionamento acontece.

EDITAR (RESOLVIDO):

Encontrou o problema.

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

A variável landingUrl foi definida como 'domain.com/login', o que não funcionaria com $ window.location.href (que foi uma das coisas que tentei). No entanto, após alterar o código para

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

agora funciona.

— Thorbjørn Kappel Hansen
fonte

Provavelmente deveria acrescentar que há autenticação do lado do servidor nos dados também, então a autenticação acima não é a única autenticação, é mais uma questão de conveniência redirecionar para a página de login, em vez de mostrar uma página quase vazia.

— Thorbjørn Kappel Hansen

1

você precisa do locationobjeto nativo usando$window.location=...

— charlietfl

Em vez disso, você pode considerar torná-lo um AngularJS incluindo sua autenticação - veja este post frederiknakstad.com/2013/01/21/…

— Soren

O plano é incluir tudo (incluindo login) dentro do aplicativo AngularJS eventualmente, mas como estamos atualmente fazendo a transição para AngularJS, a tela de registro / login parece ser a menos importante neste estágio.

— Thorbjørn Kappel Hansen

81

Eu acredito que a maneira de fazer isso é $location.url('/RouteTo/Login');

Editar para clareza

Digamos que minha rota para minha visualização de login foi /Login, eu diria$location.url('/Login') para navegar até essa rota.

Para locais fora do aplicativo Angular (ou seja, nenhuma rota definida), o JavaScript simples servirá:

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

— m.casey
fonte

Apenas tentei isso. Infelizmente, isso redireciona para www.domain.com/app/RouteTo/login em vez de www.domain.com/login

— Thorbjørn Kappel Hansen

Certo, isso não era para ser literal. Não sei o que você definiu como a rota para sua visualização de login. Coloque qualquer que seja essa rota no argumento do método $ location.url (). Eu editei a resposta para maior clareza.

— m.casey

Ah, certo. O problema aqui é que $ location.url ainda redireciona para um subcaminho do aplicativo. Portanto, usar $ location.url ('/ login') redireciona para www.domain.com/app/login em vez de www.domain.com/login

— Thorbjørn Kappel Hansen

1

Bem, conforme declarado na pergunta, atualmente a página de login fica fora do aplicativo AngularJS. Daí a necessidade de redirecionar para www.domain.com/login em vez de um caminho dentro do aplicativo.

— Thorbjørn Kappel Hansen

5

Também vale a pena mencionar que você provavelmente deve usar em $windowvez de window(fonte: stackoverflow.com/questions/28906180/… )

— Caleb Faruki

39

Parece que recarregar a página inteira $window.location.hrefé a forma preferida.

Isso não causa um recarregamento completo da página quando o URL do navegador é alterado. Para recarregar a página após alterar o URL, use a API de nível inferior, $ window.location.href.

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

— Diego ferri
fonte

19

Isso pode te ajudar! demo

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

Amostra de código HTML

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

— Anil Singh
fonte

3

Não tenho certeza de qual versão, mas eu uso 1.3.14 e você pode apenas usar:

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

Não há necessidade de injetar $locationou $windowno controlador e não há necessidade de obter o endereço do host atual.

— CularBytes
fonte

-11

Você tem que colocar:

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

Desta forma, a função angular pode acessar o objeto "janela"

— Efrain Luna Villafuerte
fonte

Não tenha medo!

— Mika