Menggunakan $ window atau $ location untuk Redirect di AngularJS

90

Aplikasi yang saya kerjakan berisi berbagai status (menggunakan ui-router), di mana beberapa negara mengharuskan Anda untuk masuk, yang lain tersedia untuk umum.

Saya telah membuat metode yang secara valid memeriksa apakah pengguna masuk, apa yang saat ini saya alami adalah mengalihkan ke halaman masuk kami bila perlu. Perlu dicatat bahwa halaman login saat ini tidak ditempatkan di dalam aplikasi 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 menunjukkan url yang dimaksud dengan benar. Baris setelah itu, saya telah mencoba hampir semuanya dari $ window.open hingga window.location.href dan tidak peduli apa yang saya coba, tidak ada pengalihan yang terjadi.

EDIT (TERSELESAIKAN):

Menemukan masalahnya. 

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

Variabel landingUrl disetel ke 'domain.com/login', yang tidak akan berfungsi dengan $ window.location.href (yang merupakan salah satu hal yang saya coba). Namun setelah mengubah kode menjadi

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

sekarang bekerja.

javascript angularjs redirect angular-ui-router Thorbjørn Kappel Hansen
sumber
Mungkin harus menambahkan bahwa ada otentikasi sisi server pada data juga, jadi di atas bukan satu-satunya otentikasi, itu lebih merupakan masalah kenyamanan untuk mengarahkan ke halaman login, daripada menampilkan halaman yang sebagian besar kosong.
Thorbjørn Kappel Hansen
1
Anda memerlukan locationobjek asli menggunakan$window.location=...
charlietfl
Alih-alih Anda dapat mempertimbangkan untuk menjadikannya semua AngularJS termasuk otentikasi Anda - lihat posting ini frederiknakstad.com/2013/01/21/…
Soren
Rencananya adalah untuk memasukkan semuanya (termasuk login) di dalam aplikasi AngularJS pada akhirnya, tetapi karena kami saat ini melakukan transisi ke AngularJS, layar pendaftaran / login tampaknya menjadi yang paling tidak penting pada tahap ini.
Thorbjørn Kappel Hansen

Jawaban:

82

Saya percaya cara untuk melakukan ini adalah $location.url('/RouteTo/Login');

Edit untuk Kejelasan

Katakanlah rute saya untuk tampilan login saya adalah /Login, menurut saya $location.url('/Login')untuk menavigasi ke rute itu.

Untuk lokasi di luar aplikasi Angular (yaitu tidak ada rute yang ditentukan), JavaScript lama biasa akan melayani:

window.location = "http://www.my-domain.com/login"
m.casey
sumber
Coba saja. Sayangnya, itu dialihkan ke www.domain.com/app/RouteTo/login daripada www.domain.com/login
Thorbjørn Kappel Hansen
Benar, itu tidak berarti literal. Saya tidak tahu apa yang Anda tetapkan sebagai rute untuk tampilan login Anda. Tempatkan rute apa pun yang mungkin ada di argumen untuk metode $ location.url (). Saya telah mengedit jawaban untuk kejelasan.
m.casey
Ah benar. Masalahnya di sini adalah bahwa $ location.url masih mengalihkan ke sub-jalur aplikasi. Jadi menggunakan $ location.url ('/ login') dialihkan ke www.domain.com/app/login daripada www.domain.com/login
Thorbjørn Kappel Hansen
1
Nah, seperti yang dinyatakan dalam pertanyaan, saat ini halaman login berada di luar aplikasi AngularJS. Karenanya kebutuhan untuk mengarahkan ulang ke www.domain.com/login daripada jalur di dalam aplikasi.
Thorbjørn Kappel Hansen
5
Perlu juga disebutkan bahwa Anda mungkin harus menggunakan $windowalih-alih window(sumber: stackoverflow.com/questions/28906180/… )
Caleb Faruki
39

Tampaknya untuk memuat ulang halaman penuh $window.location.hrefadalah cara yang lebih disukai.

Itu tidak menyebabkan pemuatan ulang halaman penuh saat URL browser diubah. Untuk memuat ulang halaman setelah mengubah URL, gunakan API tingkat yang lebih rendah, $ window.location.href.

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

Diego Ferri
sumber
19

Ini mungkin membantu Anda! demo

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

Contoh Kode HTML

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

Tidak yakin dari versi apa, tapi saya menggunakan 1.3.14 dan Anda bisa menggunakan:

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

Tidak perlu menyuntikkan $locationatau $windowdi pengontrol dan tidak perlu mendapatkan alamat host saat ini.

CularBytes
sumber
-11

Anda harus meletakkan:

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

Dengan cara ini fungsi sudut dapat mengakses objek "jendela"

Efrain Luna Villafuerte
sumber
Jangan takut!
Mika