HTTP Auth Interceptorモジュールを $resource と連携させようとしています。
今のところ、私はこのようなサービスで動作する基本的なアプリを持っています:
angular.module('myApp.services', ['ngResource']).
factory('User', function($resource){
return $resource('path/to/json/', {}, { 'login': { method: 'GET' } });
});
そして、このようなコントローラー:
angular.module('myApp.controllers', []).
controller('User', ['$scope', 'User', function($scope, List)
{ $scope.user = User.query();
]);
そしてアプリ:
angular.module('myApp', ['myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/dashboard', {templateUrl: 'partials/dashboard.html', controller: 'Dashboard'});
$routeProvider.when('/user', {templateUrl: 'partials/user.html', controller: 'TrackingCtrl'});
$routeProvider.otherwise({redirectTo: '/dashboard'});
}]);
これまでのところ、すべてが期待どおりに機能しています。次に、サーバーに http 認証を設定したため、json ファイルの http ステータスは 401 になり、ブラウザにログイン ポップアップが表示されます。HTTP Auth Interceptor モジュールを使用してブラウザのログイン ポップアップを置き換え、ログインを処理したいと考えています。それがこのスクリプトの目的ですよね?
そのために、スクリプトのデモを理解し、アプリで動作させるようにしています。
'http-auth-interceptor'
まず、アプリに注入しました。
次に、これをindex.htmlに追加しました
<body ng-controller="UserCtrl" class="auth-demo-application waiting-for-angular">
およびng-viewの上のログインフォーム:
<div id="login-holder">
<div id="loginbox">
<div id="login-inner" ng:controller="LoginController">
<form ng-submit="submit()">
Username: <input type="text" class="login-inp" ng-model="username"/><br/>
Password: <input type="password" class="login-inp" ng-model="password"/><br/>
<input type="submit" class="submit-login"/>
</form>
</div>
</div>
</div>
ページの下部にあるスクリプト:
<script src="lib/directives/http-auth-interceptor.js"></script>
controller.js で:
controller('LoginController', ['$scope', 'authService', 'User', function ($scope, authService, User) {
$scope.submit = function() {
User.login(
function(user, response) { // success
authService.loginConfirmed();
console.log('login confirmed');
}
);
}
}])
そしてこのディレクティブも:
directive('authDemoApplication', function() {
return {
restrict: 'C',
link: function(scope, elem, attrs) {
//once Angular is started, remove class:
elem.removeClass('waiting-for-angular');
var login = elem.find('#login-holder');
var main = elem.find('#content');
login.hide();
scope.$on('event:auth-loginRequired', function() {
login.slideDown('slow', function() {
main.hide();
});
});
scope.$on('event:auth-loginConfirmed', function() {
main.show();
login.slideUp();
});
}
}
})
わかりました…それだけです。しかし、まったく機能していません。ブラウザのログインフォームはまだ残っています。それがログインする唯一の方法です。
これを機能させるために何をすべきかについて何か考えはありますか?