Question

这个问题来自另一个问题：AngularJS - Determine if the view should be displayed by an ajax call result upon the route changes

关于我之前的问题，最后我找到了这个解决方案：

(function() {
    'use strict';

    angular.module("appClubS", ["appClubS.userModule", "appClubS.productModule", "clubsServices", "ngRoute", "ui.bootstrap"])
        .config(routeConfigurator);

    angular.module("appClubS")
        .controller("checkLoginCtrl", checkLoginController);

    checkLoginController.$inject = ['$scope', '$rootScope', '$location', 'userFactory'];
    routeConfigurator.$inject = ['$routeProvider', '$locationProvider'];

    function routeConfigurator($routeProvider, $locationProvider) {
        $routeProvider.when("/home", {
            templateUrl: "views/index.html"
        });

        // ...


        // the routes that visitor cannot access before signing in 
        $routeProvider.when("/account-profile/my-redeem", {
            templateUrl: "views/member_zone/my.redeem.html",
            resolve: {
                loggedin: ["$q", "userFactory", "$location", function checkPermit($q, userFactory, $location) {
                    var deferred = $q.defer();
                    var logStatus = userFactory.loggedin();
                    if (logStatus) {
                        deferred.resolve({
                            message: "Proceed to change route."
                        });
                    }
                    else {
                        deferred.reject({
                            message: "Redirect to the default page."
                        });
                        alert("Please Login First!");
                        $location.path("/login");
                    }
                    return deferred.promise;
                }]
            }
        });

        $routeProvider.when("/account-profile/my-survey", {
            templateUrl: "views/member_zone/my.survey.html",
            resolve: {
                loggedin: ["$q", "userFactory", "$location", function checkPermit($q, userFactory, $location) {
                    var deferred = $q.defer();
                    var logStatus = userFactory.loggedin();
                    if (logStatus) {
                        deferred.resolve({
                            message: "Proceed to change route."
                        });
                    }
                    else {
                        deferred.reject({
                            message: "Redirect to the default page."
                        });
                        alert("Please Login First!");
                        $location.path("/login");
                    }
                    return deferred.promise;
                }]
            }
        });

        // ...

    }


})();

但是，我为每条路线重复了相同的代码，我希望禁止不受欢迎的访问。所以现在我的问题是如何一劳永逸地做到这一点。我尝试过如下代码：

(function() {
    'use strict';

    angular.module("appClubS", ["appClubS.userModule", "appClubS.productModule", "clubsServices", "ngRoute", "ui.bootstrap"])
        .config(routeConfigurator);

    angular.module("appClubS")
        .controller("checkLoginCtrl", checkLoginController);

    checkLoginController.$inject = ['$scope', '$rootScope', '$location', 'userFactory'];
    routeConfigurator.$inject = ['$routeProvider', '$locationProvider'];

    function routeConfigurator($routeProvider, $locationProvider) {
        $routeProvider.when("/home", {
            templateUrl: "views/index.html"
        });

        // ...


        // the routes that visitor cannot access before signing in 
        $routeProvider.when("/account-profile/my-redeem", {
            templateUrl: "views/member_zone/my.redeem.html",
            resolve: {
                loggedin: ["$q", "userFactory", "$location", checkPermit]
            }
        });

        $routeProvider.when("/account-profile/my-survey", {
            templateUrl: "views/member_zone/my.survey.html",
            resolve: {
                loggedin: ["$q", "userFactory", "$location", checkPermit]
            }
        });

        // ...

    }

    function checkPermit($q, userFactory, $location) {
        var deferred = $q.defer();
        var logStatus = userFactory.loggedin();
        if (logStatus) {
            deferred.resolve({
                message: "Proceed to change route."
            });
        }
        else {
            deferred.reject({
                message: "Redirect to the default page."
            });
            alert("Please Login First!");
            $location.path("/login");
        }
        return deferred.promise;
    }


})();

它没有用，我得到错误说：延迟没有定义，类似的东西。然后我用一个工厂来包装那条逻辑：

(function() {
    'use strict';

    angular.module("appClubS", ["appClubS.userModule", "appClubS.productModule", "clubsServices", "ngRoute", "ui.bootstrap"])
        .config(routeConfigurator);

    angular.module("appClubS")
        .controller("checkLoginCtrl", checkLoginController)
        .factory('checkPermit', checkPermitFactory);

    checkLoginController.$inject = ['$scope', '$rootScope', '$location', 'userFactory'];
    routeConfigurator.$inject = ['$routeProvider', '$locationProvider', 'checkPermit'];
    checkPermitFactory.$inject = ['$q', '$location', 'userFactory'];

    function routeConfigurator($routeProvider, $locationProvider, checkPermit) {
        $routeProvider.when("/home", {
            templateUrl: "views/index.html"
        });

        // ...


        // the routes that visitor cannot access before signing in 
        $routeProvider.when("/account-profile/my-redeem", {
            templateUrl: "views/member_zone/my.redeem.html",
            resolve: {
                loggedin: function (checkPermit) {
                    return checkPermit.checklogin();
                }
            }
        });

        $routeProvider.when("/account-profile/my-survey", {
            templateUrl: "views/member_zone/my.survey.html",
            resolve: {
                loggedin: function (checkPermit) {
                    return checkPermit.checklogin();
                }
            }
        });

        // ...

    }

    function checkPermitFactory($q, userFactory, $location) {

        function checklogin() {
            var deferred = $q.defer();
            var logStatus = userFactory.loggedin();
            if (logStatus) {
                deferred.resolve({ message: "Proceed to change route." });
            }
            else {
                deferred.reject({ message: "Redirect to the default page." });
                alert("Please Login First!");
                $location.path("/login");
            }

            return deferred.promise;
        }

        var factory = {
            checklogin: checklogin
        };

        return factory;
    }



})();

我得到错误，说它找不到checkPermit提供程序，在调查这个问题时，我意识到你只是不能对factoryConfigurator的工厂的立场注入依赖，所以在这里我应该使用checkPermitProvider代替。

我现在很困惑。

感谢任何帮助。感谢。

Answer 1

谢谢大家的回复。

最后，我发现我可以通过这种方式使用它：

(function() {
    'use strict';

    angular.module("appClubS", ["appClubS.userModule", "appClubS.productModule", "clubsServices", "ngRoute", "ui.bootstrap"])
        .config(routeConfigurator);

    angular.module("appClubS")
        .controller("checkLoginCtrl", ['$q', '$location', 'userFactory', function checkPermitFactory($q, userFactory, $location) {

        function checklogin() {
            var deferred = $q.defer();
            var logStatus = userFactory.loggedin();
            if (logStatus) {
                deferred.resolve({ message: "Proceed to change route." });
            }
            else {
                deferred.reject({ message: "Redirect to the default page." });
                alert("Please Login First!");
                $location.path("/login");
            }

            return deferred.promise;
        }

        var factory = {
            checklogin: checklogin
        };

        return factory;
    }])
        .factory('checkPermit', checkPermitFactory);

    checkLoginController.$inject = ['$scope', '$rootScope', '$location', 'userFactory'];
    routeConfigurator.$inject = ['$routeProvider', '$locationProvider', 'checkPermit'];

    function routeConfigurator($routeProvider, $locationProvider, checkPermit) {
        $routeProvider.when("/home", {
            templateUrl: "views/index.html"
        });

        // ...


        // the routes that visitor cannot access before signing in 
        $routeProvider.when("/account-profile/my-redeem", {
            templateUrl: "views/member_zone/my.redeem.html",
            resolve: {
                loggedin: function (checkPermit) {
                    return checkPermit.checklogin();
                }
            }
        });

        $routeProvider.when("/account-profile/my-survey", {
            templateUrl: "views/member_zone/my.survey.html",
            resolve: {
                loggedin: function (checkPermit) {
                    return checkPermit.checklogin();
                }
            }
        });

        // ...

    }

})();

我使用$ inject属性来指定依赖项，因为这是在本文的“手动识别依赖关系”一节中提出的：https://github.com/johnpapa/angularjs-styleguide#manually-identify-dependencies。

老实说，我不太明白$注入是怎么回事;我刚才得到了关注。所以这个问题已经解决了，但我不知道定义控制器和声明依赖关系的两种方式之间的区别。

AngularJS - Hook Routes改变并集中逻辑

1 个答案: