在 AngularJS 中使用 $window 或 $location 重定向答案

【问题标题】：Using $window or $location to Redirect in AngularJS在 AngularJS 中使用 $window 或 $location 重定向
【发布时间】：2014-09-07 18:26:34
【问题描述】：

我正在开发的应用程序包含各种状态（使用 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 （这是我尝试过的事情之一）。但是将代码更改为

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

现在可以了。

【问题讨论】：

应该补充一下，数据也有服务器端认证，所以上面不是唯一的认证，更多的是方便重定向到登录页面，而不是显示一个几乎是空的页面。
你需要使用 $window.location=... 的原生 location 对象
相反，您可以考虑将其全部设为 AngularJS，包括您的身份验证 - 请参阅此帖子 frederiknakstad.com/2013/01/21/…
计划最终将所有内容（包括登录）包含在 AngularJS 应用程序中，但由于我们目前正在过渡到 AngularJS，因此注册/登录屏幕似乎在这个阶段最不重要。

标签： javascript angularjs redirect angular-ui-router

【解决方案1】：

我相信这样做的方法是$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
对，这不是字面意思。我不知道您将什么定义为登录视图的路径。将任何可能的路由放在 $location.url() 方法的参数中。为了清楚起见，我已经编辑了答案。
对了。这里的问题是 $location.url 仍然重定向到应用程序的子路径。所以使用 $location.url('/login') 重定向到 www.domain.com/app/login 而不是 www.domain.com/login
好吧，正如问题中所述，目前登录页面位于 AngularJS 应用程序之外。因此需要重定向到 www.domain.com/login 而不是应用程序内的路径。
还值得一提的是，您可能应该使用$window 而不是window（来源：stackoverflow.com/questions/28906180/…）

【解决方案2】：

也许对你有帮助！ demo

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】：

似乎对于整页重新加载$window.location.href 是首选方式。

更改浏览器 URL 时不会导致整个页面重新加载。要在更改 URL 后重新加载页面，请使用较低级别的 API，$window.location.href。

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

【讨论】：

【解决方案4】：

你必须输入：

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

这样角度函数可以访问“窗口”对象

【讨论】：

别害怕！

【解决方案5】：

不知道是什么版本，但我用的是1.3.14，你可以用：

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

无需在控制器中注入$location或$window，也无需获取当前主机地址。

【讨论】：