如何使用angular-ui-router重新加载配置?

时间:2016-03-20 16:02:49

标签: angularjs angular-ui-router

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

如果用户未登录,导航到/#/home会成功将网址更改为/#/login ...这不会重新加载页面,因此可让用户访问主页无论如何lol。

那么,你如何重新加载路线?

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

我使用的是角度版本1.5.1和angular-ui-router版本0.2.18。

2 个答案:

答案 0 :(得分:2)

使用 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});
            }
        });
    }]);

答案 1 :(得分:0)

感谢@ 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-cookiesangular-local-storage,需要用来保存数据等。