AngularJS $ location.path没有重定向

Question

我一直在寻找解决方案，但仍然无法使$location.path()正常工作。

案例很简单：在正面身份验证之后，我正在尝试返回根地址：/#/。地址栏中的路径正在更改，但页面不会更改。奇怪的是，当我在地址栏中按“Enter”时，页面会在转到根地址之前重新加载。更奇怪的是，我必须多次输入才能将其重定向到另一个页面。这很奇怪，因为这不是“单页”方法应该是如何工作的。

我正在使用Angular Router，页面的其余部分正常工作。键入路径并按“Enter”后，每个屏幕都会顺利加载 - 无需重新加载。唯一的问题是验证步骤。

首次加载应用程序时，由于没有保存身份验证详细信息而发出/login页面，因此可以在正面身份验证后将应用程序重定向到根地址（但并非总是如此）。但是，当应用程序运行时验证详细信息丢失，并且用户被重定向到/login页面时，应用程序无法返回到根URL。

我创建了一个流程图，介绍了路径的变化方式。当用户打开应用程序并且尚未登录时，绿色区域呈现第一种情况。当用户由于某种原因（例如旧令牌，来自另一个源的改变的密码）丢失认证细节时，读取区域呈现第二种情况。用户被重定向到/login页面，然后在正面身份验证后，无法返回到根URL。

我试图在$location.path('/')中包裹$scope.$apply，但收到错误，摘要实际上正在进行中。将其包含在$timeout中也无济于事。我当然可以在更改路径后重新加载页面，但它会产生消失界面的丑陋效果。

下面是按下“登录”按钮后触发的代码。

function doLogin() {
    vm.loginInProgress = true;

    LoginService.login(vm.username, vm.password).then(function () {
        $location.path('/');
    }).catch(function () {
        var confirm = $mdDialog.confirm()
            .title('Authentication error')
            .textContent('Username and/or password is invalid.')
            .ariaLabel('Authentication error')
            .ok('OK')
            .cancel('Forgotten password?');

        $mdDialog.show(confirm).catch(function() {
            //TODO: Forgotten password
        })
    }).finally(function () {
        vm.loginInProgress = false;
    });
}

路线：

$routeProvider
    .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginController',
        controllerAs: 'vm'
    })
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeController',
        controllerAs: 'vm',
        resolve: {
            init: init
        }
    });

/* @ngInject */
function init(ConfigService, TemperatureService) {
var ret = {};

return ConfigService.finished()
    .then(function () {
        return TemperatureService.getSetPoint();
    })
    .then(function (data) {
        ret['setpoint'] = data;
        return TemperatureService.getWorkModes();
    })
    .then(function (data) {
        ret['workmodes'] = data;
        return ret;
    });
}

它看起来像location.path方法的奇怪行为。或者我只是遗漏了一些东西。我们将不胜感激。

Answer 1

在你的问题中，你已经使用resolve来执行该解析函数中给出的代码。

您必须在用于解析的init函数中遇到一些问题。

$routeProvider
    .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginController',
        controllerAs: 'vm'
    })
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeController',
        controllerAs: 'vm',
        resolve: {
            init: init
        }
    });

你的初学者可以去这里，

var init = function ($q, $rootScope, $location) {
    if ($rootScope.login) {
        return true;
    } else {
        $location.path('/login')  // this is a sample
    }
};

您可能在此方法中遇到一些问题。请检查一次。

Answer 2

这可能是由于路由init的解析功能/无法正确解析。

您可以尝试收听$routeChangeError事件，看看出了什么问题。

$rootScope.$on('$routeChangeError', function () {
  ...
});