1

我们的应用程序使用$http拦截器将令牌添加到$http请求中作为一种安全形式，拦截器添加的令牌每 5 分钟左右更新一次。我们现在要使用ng-grid.

但是，$http拦截器ng-grid不会加载它用于标题行的模板，这会导致标题行无法呈现。

这是实际问题：http ://plnkr.co/edit/krvBF2e4bHauQmHoa05T?p=preview

如果您检查控制台，它会显示以下错误：

GET http://run.plnkr.co/l0BZkZ2qCLnzBRKa/ng1389719736618headerRowTemplate.html?securityToken=123456 404 (Not Found)

发生这种情况的原因是因为ng-grid将标题行的模板存储在 中$templateCache，然后使用 anng-include稍后检索它。

ng-include使用作为缓存的$http.get请求$templateCache来获取模板。

请求被拦截器拦截，$http.get拦截器在它有机会$templateCache使用 url 查询模板之前将安全令牌添加到 url。

$templateCache期待ng1389719736618headerRowTemplate.html但得到ng1389719736618headerRowTemplate.html?securityToken=123456

结果是$templateCache找不到模板，然后导致$http.get访问服务器并收到 404 错误。

另一个问题是，如果我们想使用来存储模板，然后用or$templateCache检索它，将无法找到模板，因为 url 会被修改。ng-include$http.get$templateCache

如何使用拦截器在 URL 末尾添加安全令牌来ng-grid显示标题行？$http

这是代码Html：

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

javascript:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'myData' };
});

app.config(function($provide, $httpProvider) {
    $provide.factory('tokenAuthInterceptor', function($q){
        return {
            // optional method
            'request': function(config) {
                // do something on success
                config.url = config.url + "?securityToken=123456";
                return config || $q.when(config);
            }
        };
    });
    $httpProvider.interceptors.push('tokenAuthInterceptor');
});

更新

最终决定的解决方案是使用 Angular 装饰器和 decorate $templateCache，更新了 plunker 以反映这一点。

$provide.decorator('$templateCache', function($delegate) {
    var get = $delegate.get;
    function formatKey(key)
        {
         // code for formatting keys
        }
        $delegate.get = function(key) {
            var entry = get(key);
            if (entry)
            {
                return entry;
            }
            else
            {
                return get(formatKey(key));
            }
        };
    return $delegate;
});
4

1 回答 1

0

我们遇到了同样的问题，并在我们的拦截器中实现了一个快速检查，以检查该项目是否已经在 templateCache 中。

if ($templateCache.get(config.url)){
    return config;
}

我从cachebuster项目中得到了这个想法。

于 2014-03-06T03:36:08.413 回答