$ windowまたは$ locationを使用してAngularJSでリダイレクトする


90

私が取り組んでいるアプリには、さまざまな状態(ui-routerを使用)が含まれており、一部の状態ではログインが必要ですが、他の状態は公開されています。

ユーザーがログインしているかどうかを有効にチェックするメソッドを作成しました。現在問題があるのは、必要なときに実際にログインページにリダイレクトすることです。ログインページは現在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は、意図したURLを適切に表示します。その次の行では、$ window.openからwindow.location.hrefまでほぼすべてを試しましたが、何を試みてもリダイレクトは発生しません。

編集(解決済み):

問題が見つかりました。

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

変数landingUrlは 'domain.com/login'に設定され、$ window.location.href(これは私が試したものの1つ)では機能しませんでした。ただし、コードを

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

今は動作します。


データにもサーバー側の認証があることをおそらく追加する必要があります。そのため、上記の認証だけではなく、ほとんど空のページを表示する代わりに、ログインページにリダイレクトする方が便利です。
–ThorbjørnKappel Hansen 2014

1
location使用するネイティブオブジェクトが必要$window.location=...
charlietfl '17 / 07/17

代わりに、あなたはそれをあなたの認証を含むすべてのAngularJSを作るために検討することもでき-この記事を参照frederiknakstad.com/2013/01/21/...
ソレン

最終的にはAngularJSアプリ内にすべての(ログインを含む)を含める予定ですが、現在AngularJSへの移行を行っているため、この段階では登録/ログイン画面が最も重要ではないようです。
–ThorbjørnKappel Hansen 2014

回答:


81

これを行う方法は $location.url('/RouteTo/Login');

わかりやすく編集

ログインビューのルートが/Loginだったとすると$location.url('/Login')、そのルートに移動するように言います。

Angularアプリの外部の場所(つまり、ルートが定義されていない場所)では、プレーンな古いJavaScriptが機能します。

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

試してみただけです。残念ながら、www.domain.com/app/RouteTo/loginはなくwww.domain.com/loginにリダイレクトする
するThorbjörnカッペルハンセン

そう、それは文字通りであるという意味ではありませんでした。ログインビューのルートとして何を定義したかわかりません。$ location.url()メソッドの引数に、そのルートが何であれ配置します。わかりやすくするために、回答を編集しました。
m.casey 2014

そうだね。ここでの問題は、$ location.urlが引き続きアプリのサブパスにリダイレクトすることです。$ location.url(「/ログイン」)www.domain.com/app/loginへリダイレクトではなくwww.domain.com/login使用してそう
するThorbjörnカッペルハンセン

1
さて、質問で述べたように、現在ログインページはAngularJSアプリの外にあります。したがって、アプリ内のパスではなく、www.domain.com / loginにリダイレクトする必要があります。
–ThorbjørnKappel Hansen 2014

5
(source:stackoverflow.com/questions/28906180/…)の$window代わりに使用する必要があることにも言及する価値がありますwindow
Caleb Faruki

39

全ページのリロード$window.location.hrefが推奨される方法のようです。

ブラウザのURLが変更されても、ページ全体が再読み込みされることはありません。URLの変更後にページを再読み込みするには、下位レベルのAPI、$ window.location.hrefを使用します。

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


19

それはあなたを助けるかもしれません!デモ

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

HTMLコードサンプル

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

3

どのバージョンかわからないが、私は1.3.14を使用しており、次のように使用できます。

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

コントローラー内に挿入し$locationたり$window、現在のホストアドレスを取得したりする必要はありません。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.