我如何获得angularjs的基本身份validation工作？
我如何获得AngularJs的基本authentication？ 我GOOGLE了，资源不适合我。 我对AngularJS 很新
假设你的html是这样定义的：
<!doctype html> <html ng-app="sandbox-app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="todo.js"></script> <link rel="stylesheet" href="todo.css"> </head> <body> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <ol> ... </ol> </div> </body> </html> 你可以让你的后端连接到一个restapi使用基本的身份validation，如下所示：
var app = angular.module('sandbox-app', []); app.config(function($httpProvider) { }); app.factory('Base64', function() { var keyStr = 'ABCDEFGHIJKLMNOP' + 'QRSTUVWXYZabcdef' + 'ghijklmnopqrstuv' + 'wxyz0123456789+/' + '='; return { encode: function (input) { var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; do { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4); chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return output; }, decode: function (input) { var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; // remove all characters that are not AZ, az, 0-9, +, /, or = var base64test = /[^A-Za-z0-9\+\/\=]/g; if (base64test.exec(input)) { alert("There were invalid base64 characters in the input text.\n" + "Valid base64 characters are AZ, az, 0-9, '+', '/',and '='\n" + "Expect errors in decoding."); } input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); do { enc1 = keyStr.indexOf(input.charAt(i++)); enc2 = keyStr.indexOf(input.charAt(i++)); enc3 = keyStr.indexOf(input.charAt(i++)); enc4 = keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return output; } }; }); //here's where YOUR code is finally accessed function TodoCtrl($scope, $http, Base64) { $http.defaults.headers.common = {"Access-Control-Request-Headers": "accept, origin, authorization"}; //you probably don't need this line. This lets me connect to my server on a different domain $http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('admin' + ':' + 'abc12345'); $http({method: 'GET', url: 'http://localhost:8888/app/api/v1/pets'}). success(function(data, status, headers, config) { $scope.pets = data; // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { alert(data); // called asynchronously if an error occurs // or server returns response with an error status. }); }
注意这个代码的大部分是Base64方法。 如果您不需要支持IE9或更低版本，则可以使用原生JS实现（atob（）和btoa（））replace它： https ： //developer.mozilla.org/en/docs/web/api/windowbase64/atob
对我来说，这个总是在实际工作之前报告一个401。 我相信这是一个angular码错误，但我不确定。 我在这里创build了一个问题： https ： //github.com/angular/angular.js/issues/3406
