Question

我有一个登录界面，其中包含用户名和密码，并根据网络服务对其进行身份验证。如果Web服务返回＆＃34; true＆＃34;指示用户已通过身份验证，我想将用户重定向到已登录的主页。以下是此代码：

var app = angular.module('app');
app.controller('loginCtrl', function ($scope, $location, UserService) {
    $scope.authUser = function () {
        UserService.AuthenticateUser($scope.Username, $scope.Password)
            .then(function (result) {
                // Check contents of HTTP response for "true".
                if (result.data == "true") {
                    // Web service returned "true" indicated user is authenticated; therefore, redirect to logged-in home page.
                    $location.path("/home");
                } else {
                    // Web service returned "false" indicating user is not authenticated.
                    alert("Authentication failed.");
                }
            })
            .catch(function () {
                alert("Attempt to authenticate user failed.");
            });
    };
});
app.factory('UserService', function ($http) {
    return {
        AuthenticateUser: function (username, password) {
            var url = "https://<redacted>/";
            var request = {
                "Username": username,
                "Password": password
            };
            return $http.post(url + 'auth', request);
        }
    };
});

我的问题在于以下几行：

$location.path("/home");

Web服务工作正常，调试器中的行被命中，但路由更改不会发生。控制台中没有出现错误。

这与摘要生命周期有关吗？承诺如何运作？路由在应用程序的其他地方工作正常，就在我尝试在$ http调用之后使用它时，它无法工作。对于改变观点，这甚至是正确的角度模式吗？

路由：

$routeProvider
    .when('/home', {
        templateUrl: 'home.html'
    })
    .otherwise({
        templateUrl: 'login.html'
    });
$locationProvider.html5Mode(false);

Answer 1

更改网址后，您需要添加$scope.$apply()。

$location.path("/home");
$scope.$apply()

$ apply（）用于从外部执行角度表达式角度框架。（例如，来自浏览器DOM事件， setTimeout，XHR或第三方库。）

但是，我建议您启用html5mode并使用有角度的ui-router。

修改

如果您的“摘要已经在进行中”，请将$location.path打包到$timeout，请记得先将其注入。

$timeout(function() { $location.path("/home"); })

然后你的url change将在下一个摘要周期运行safaly。

路由更改在promise回调函数中不起作用

1 个答案: