Question

*如果我在这里误解某事，我道歉=）

在角度中，模板通过XHR从服务器请求并加载到应用程序中，然后保存在缓存中。如果我加载页面并查看网络，您可以看到以下请求：

远程地址：XX.XXX.X.XX：80
请求网址：http：// {host} /views/notifications.html
请求方法：GET
状态代码：200 OK

我已在应用程序服务器上使用/views的上下文根锁定了路径。

问题：有没有办法向templateURL提供用户名/密码的凭据，以便在获取初始模板时使用auth？如果是这样，Angular是否为此提供了一种机制，或者它是我必须分叉和自定义的东西。或者可能有更好的方法来在AngularJS应用程序中启用页面级安全性。

I want to avoid simply hiding and showing pages. The idea being you couldn't just open a console and switch some booleans and display a page

提前致谢！

Answer 1

首先，您可能希望使用ui-router来更改视图/模板。使用ui-router，您可以在resolve语句中使用状态并检查身份验证，如下所示：

$stateProvider.$state('notifications', {
   url: '/notifications',
   templateUrl: 'notifications.html',
   resolve : {
     auth: function(AuthenticationService) { // create an authentication service
       if (!AuthenticationService.Auth) { // check for authentication
         $state.go('login) // go to a different states
       }
      }
   }
})

解决方案基本上是承诺在渲染模板之前做一些事情。

此外：

不要使用get请求来获取模板，而是查看$ templateCache服务。

$ templateCache允许您使用put方法和键/值来缓存模板。这样，无论何时需要使用templateUrl，您都可以注入$ templateCache服务并按键引用模板，如下所示：

$templateCache.put('notifications.html', '<div> Your Template Here</div>');

然后在指令中例如：

 app.directive('someDirective', function($templateCache){

  return {
   restrict: 'ECMA',
   templateUrl: 'notifications.html'
  }
 })

同样，如果你在html中使用ng-include，你可以用同样的方式引用模板：

<div ng-include='notifications.html'></div

您还需要查看gulp-angular-templateCache以帮助您将所有html模板连接成字符串值以插入到$ templateCache中。

此外，您还需要在角度代码的运行块中运行所有模板缓存。

如果您使用$ templateCache服务，则角度应用程序中的运行块可能如下所示：

angular.module("sampleShoppingApp", []).run(["$templateCache", function($templateCache) {
$templateCache.put("cart-footer.html","<div class=\'title cart-footer\'>Checkout</div>");
$templateCache.put("cart-item.html","<div ng-if=\'!emptyProducts\'>\n  <div class=\'card product-card\' ng-repeat=\'product in products track by $index\'>\n    <div class=\'item item-thumbnail-right product-item\'>\n      <img ng-src=\'{{product.images[0]}}\' class=\'product-image\' ion-product-image=\'product\'>\n      <h3 class=\'product-title\'>{{product.title}}</h3>\n      <p class=\'product-description\'>{{product.description}}</p>\n\n      <i class=\'icon ion-plus-round icon-plus-round\' mouse-down-up ng-click=\'addProduct(product)\'></i>\n         <span class=\'product-quantity\'>{{product.purchaseQuantity}}</span>\n      <i class=\'icon ion-minus-round icon-minus-round\' mouse-down-up ng-click=\'removeProduct(product)\'></i>\n\n      <span class=\'product-price\'>${{product.price}}</span>\n    </div>\n  </div>\n  <div>\n    <br><br><br><br>\n  </div>\n</div>\n\n<div class=\'empty-cart-div\' ng-if=\'emptyProducts\'>\n  <h3 class=\'empty-cart-header\'>Your bag is empty!</h3>\n  <i class=\'icon ion-bag empty-cart-icon\'></i>\n</div>");
$templateCache.put("checkout-footer.html","<div class=\'title purchase-footer\'>Pay</div>");
$templateCache.put("checkout.html","\n<span class=\'checkout-form-description\'>Please enter your credit card details:</span>\n\n<div class=\'list checkout-form\'>\n  <checkout-name ng-if=\'hasNameDir\'></checkout-name>\n  <checkout-card></checkout-card>\n  <checkout-address ng-if=\'hasAddressDir\'></checkout-address>\n  <checkout-email ng-if=\'hasEmailDir\'></checkout-email>\n</div>\n\n<h2 class=\'checkout-total\'>Total: ${{total}}</h2>\n");
$templateCache.put("gallery-item.html","<div class=\'ion-gallery-content\'>\n  <div class=\'card gallery-card\' ng-repeat=\'product in products track by $index\'>\n    <div class=\'item gallery-item\'>\n      <div class=\'gallery-image-div\'>\n        <img ng-src=\'{{product.images[0]}}\' class=\'gallery-product-image\'>\n      </div>\n      <h3 class=\'gallery-product-title\'>{{product.title}}</h3>\n      <h3 class=\'gallery-product-price\'>${{product.price}}</h3>\n      <div class=\'gallery-product-add\' ng-click=\'addToCart(product)\'>\n        <h3 class=\'gallery-product-add-title\' cart-add>{{addText}}</h3>\n      </div>\n    </div>\n  </div>\n</div>");
$templateCache.put("partials/address-line-one.html","<label class=\'item item-input address-line-one\'>\n  <input type=\'text\' ng-model=\'checkout.addressLineOne\' placeholder=\'Address Line 1\'>\n</label>");
$templateCache.put("partials/address-line-two.html","<label class=\'item item-input address-line-two\'>\n  <input type=\'text\' ng-model=\'checkout.addressLineTwo\' placeholder=\'Address Line 2\'>\n</label>");
$templateCache.put("partials/address.html","<div class=\'item item-divider\'>Address: </div>\n<address-one-input></address-one-input>\n<address-two-input></address-two-input>\n<city-input></city-input>\n<state-input></state-input>\n<zip-input></zip-input>\n");
}]);

保护XHR请求到AngularJS templateURL

1 个答案: