具有众多路线的角度解决方案答案

【问题标题】：angular resolve with numerous routes具有众多路线的角度解决方案
【发布时间】：2017-02-08 16:09:49
【问题描述】：

我正在开发属于家庭应用程序的应用程序。每个应用程序都使用相同的令牌但设置不同，我编写了一段代码，允许在加载控制器和页面模板之前检查配置，但问题是我有大约 50 条路由，我不想复制它每条路线。所以我想知道 Angular 是否有一些拦截器允许在加载路由之前解析我的检查功能并且不要重复这段代码

附：当然最简单的方法是为此编写工厂并为每条路线添加简单的“解析返回工厂”行，但我很好奇是否还有其他方法？

接下来是我的解析函数

  page: 'Home Page',
        templateUrl: Config.baseURL + '/views/welcome.html',
        controller: 'welcome',
        resolve: {
            getConfig: function (lovServices) {
                var config = App.storage('App_config');
                if (config == null){
                    return lovServices.appConfig()
                        .then(function (response) {
                            App.storage('App_config', response);
                        })
                } else {
                    return false
                }
            },
            getPermissions: function (lovServices) {
                var permissions = App.storage('App_access');
                if (permissions == null){
                    return  lovServices.permissions()
                        .then(function (response) {
                            function checkAvailability(arr, val) {
                                return arr.some(function(arrVal) {
                                    return val === arrVal.allowed;
                                });
                            }
                            if (checkAvailability(response, true)){
                                var permissions = JSON.stringify(response);
                                App.storage('App_access', permissions);
                            } else {
                                localStorage.removeItem('App_token');
                                localStorage.removeItem('App_config');
                                localStorage.removeItem('App_access');
                                return false
                            }
                        });
                }
            }
        }
    })

【问题讨论】：

Angular 确实有通常用于身份验证的拦截器 - docs.angularjs.org/api/ng/service/$http
@Developer 我知道这个拦截器，如果本地存储中没有令牌，我已经在使用它了。这不是我要找的
在这种情况下，我认为您正在寻找在路由更改事件 ($routeChangeStart) 中编写上述代码，这将在每个路由转换中触发。如果检查失败，您可以拒绝过渡
@Developer 找到了更好的方法来查看我的答案

标签： angularjs angular-routing angular-services

【解决方案1】：

所以基于this answer在路由定义之前我的路由提供者里面我已经放了这个代码：

   function ($routeProvider, $locationProvider) {

    var originalWhen = $routeProvider.when;

    $routeProvider.when = function(path, route) {

        route.resolve || (route.resolve = {});
        angular.extend(route.resolve, {
            getConfig: function (lovServices) {
                var config = App.storage('App_config');
                if (config == null && path !== '/login'){
                    return lovServices.AppConfig()
                        .then(function (response) {
                            App.storage('App_config', response);
                        })
                } else {
                    return false
                }
            },
            getPermissions: function (lovServices) {
                var permissions = App.storage('App_access');
                if (permissions == null && path !== '/login'){
                    return  lovServices.permissions()
                        .then(function (response) {
                            function checkAvailability(arr, val) {
                                return arr.some(function(arrVal) {
                                    return val === arrVal.allowed;
                                });
                            }
                            if (checkAvailability(response, true)){
                                var permissions = JSON.stringify(response);
                                App.storage('App_access', permissions);
                            } else {
                                localStorage.removeItem('App_token');
                                localStorage.removeItem('App_config');
                                localStorage.removeItem('App_access');
                                return false
                            }
                        });
                }
            }
        });

        return originalWhen.call($routeProvider, path, route);
    };

    $routeProvider.when('/', { ....

此代码按我的预期工作。

【讨论】：