如何使用 angular-ui-router 在配置中重新加载？答案

【问题标题】：How to reload in config with angular-ui-router?如何使用 angular-ui-router 在配置中重新加载？
【发布时间】：2016-03-20 16:02:48
【问题描述】：

如果用户未登录（使用我的自定义 loginProvider 进行检查），我正在 run 部分中收听 $stateChangeStart 以重定向到登录页面。

如果用户未登录，导航到 /#/home 成功将 url 更改为 /#/login...虽然这不会重新加载页面，因此仍然允许用户访问主页哈哈。

那么，如何重新加载路线？

angular.module("app", [
    "app",
    "ui.router"
])
    .config(["$stateProvider", "$urlRouterProvider", "$httpProvider", function ($stateProvider, $urlRouterProvider, $httpProvider) {
        $stateProvider
            .state("login", {
                url: "/login",
                templateUrl: "app/login/login.html",
                controller: "loginController",
                authenticate: false
            })
            .state("home", {
                url: "/home",
                templateUrl: "app/home/home.html",
                controller: "homeController",
                authenticate: true
            });

        $urlRouterProvider.otherwise("login");
    }])
    .run(["$rootScope", "$state", "loginProvider", function ($rootScope, $state, loginProvider) {
        $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
            if (toState.authenticate && !loginProvider.isLoggedIn()) {
                $state.transitionTo("login");
                $state.reload(); // not working
                $state.go("login", {}, {reload: true}); // not working
            }
        });
    }]);

我正在使用 angular 版本 1.5.1 和 angular-ui-router 版本 0.2.18。

【问题讨论】：

是否显示任何错误？
@Sandeep 没有错误，只是导航到 /#/home 将 url 更改为 /#/login... 但无论如何都会显示主页。我希望它导航到并重新加载登录页面。
看我的回答可能对你有帮助

标签： angularjs angular-ui-router

【解决方案1】：

使用 event.preventDefault();

.run(["$rootScope", "$state", "loginProvider", function ($rootScope, $state, loginProvider) {
        $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
            if (toState.authenticate && !loginProvider.isLoggedIn()) {
                event.preventDefault();
                $state.go("login", {}, {reload: true});
            }
        });
    }]);

【讨论】：

感谢@Sandeep！使用event.preventDefault() 现在重新路由到/#/login 并且在未登录时重新加载。但是现在一旦登录，F5 刷新/#/home re -路由返回登录...
我认为你的情况不正确。检查您的状况。
按照您的建议，我添加了一个附加条件 (see my answer here)。这解决了这个问题，除了F5 刷新将删除isLoggedIn 信息。所以，看来我需要使用$cookies 在页面刷新时持久化数据。这是一个不同的问题，所以我将其标记为答案。再次感谢@Sandeep！

【解决方案2】：

感谢@Sandeep 的回答，我用这段代码解决了$rootScope.$on("$stateChangeStart"... 中的大部分路由问题：

var isLoggedIn = loginProvider.isLoggedIn();

if (toState.authenticate && !isLoggedIn) {
    event.preventDefault();
    $state.transitionTo("login");

} else if (fromState.name === "home" && isLoggedIn) {
    event.preventDefault();
    $state.transitionTo("home");
}

请注意，我的isLoggedIn 逻辑不会在 F5 页面刷新后仍然存在 - 为此需要 angular-cookies、angular-local-storage 或类似的用于持久化数据。

【讨论】：