All geek questions in one place

Using angularjs http-auth with $ resource

I am trying to make HTTP Auth Interceptor The module works with $ resource.

I have a basic application that works with these services:

angular.module('myApp.services', ['ngResource']). factory('User', function($resource){ return $resource('path/to/json/', {}, { 'login': { method: 'GET' } }); });

and then controllers like this one:

 angular.module('myApp.controllers', []). controller('User', ['$scope', 'User', function($scope, List) { $scope.user = User.query(); ]);

and application:

 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'}); }]);

So far, everything is working as expected. Then I set HTTP authentication on the server, so the status of the http-json files is 401, and the browser displays a login popup. I would like to use the HTTP Auth Interceptor Module to replace the browser login popup and handle the login. this is the purpose of this script, right?

To do this, I am trying to understand a demo script and do this with my application.

First, I injected 'http-auth-interceptor' into the application.

then it was added to index.html

 <body ng-controller="UserCtrl" class="auth-demo-application waiting-for-angular">

and the login form above 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>

and script at the bottom of the page:

 <script src="lib/directives/http-auth-interceptor.js"></script>

in controller.js file:

  controller('LoginController', ['$scope', 'authService', 'User', function ($scope, authService, User) { $scope.submit = function() { User.login( function(user, response) { // success authService.loginConfirmed(); console.log('login confirmed'); } ); } }])

and this directive too:

 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(); }); } } })

It's good. but it doesn't work at all: the browser log form still exists. and that the only way to log in.

Any idea on what I should do to make this work?

+4
source share
1 answer

From the web page:

Typical use case:

  • somewhere: $ http (...). then (function (response) {do-something-with-response}) is called,
  • the response to these requests is HTTP 401,
  • "http-auth-interceptor" captures the initial request and translation event: auth-loginRequired ',
  • your application intercepts this, for example, show a login dialog (or something else),
  • Once your application finds out that authentication is OK, you should call: authService.loginConfirmed () ,
  • your initial failed request will now be retried, and finally do-something-with-response will light up.

So, the only thing you need to do to interact with this is to have a parent scope for listening even:auth-loginRequired . This can be done in the directive, in the controller, it does not matter. I have not used the software, but I imagine something like this:

 angular.module('myApp', []) .service('api', function(httpAutenticationService, $rootScope, $location) { $rootScope.$on('event:auth-loginRequired', function() { // For the sake of this example, let say we redirect the user to a login page $location.path('/login') }) $http.get(API_URL).then( ... ); // If the user is not authenticated, this will be intercepted (1) }) .controller('LoginController', function(httpAutenticationService) { // Let imagine you have a route with the 'controller' option to this controller $http.get(LOGIN_URL).then(function() { httpAutenticationService.loginConfirmed(); // The success callback from (1) will be executed now }, function(){ alert("Invalid credentials") }) })
+4
source

Source: https://habr.com/ru/post/1501959/

More articles:


All Articles