How to put check condition(i.e user is logged in or not) before every API call in front end?

Question

I am new to Angular JS and Django. I am working on a project in which back end is implemented using Django framework. In this project multiple API's are there. Our front end is developed using Angular JS (Actually it is Angular JS Single page Application).I want to know that what would be the way to put a check condition that user is logged in or not before each API call.Because we want to reduce unnecessary Api calling until a user logged in. Currently , However we have implemented authentication mechanism in our back end part but we also want to implement some mechanism in front end so that until a user logged in ,no request will pass to server. Angular-middleware may solve this problem but I want some demo example of how to use them. Please suggest some method. Thanks in advance.

I would say this question is off topic for the StackOverflow site, but I would suggest a microservice/middleware approach — Isaac, Aug 07 '17 at 04:28
to reiterate, this would involve writing a service that would allow you to chain the processing of the api requests and have some form of "before all requests, do this" and set up steps etc — Isaac, Aug 07 '17 at 04:29
can u please provide me some short example code to do this because i am very knew to angular js.And i know very less about how to write code for a service. — Rahul Choudhary, Aug 07 '17 at 04:32
No i cant sorry (you'd have to write the code). Maybe look at https://www.npmjs.com/package/angular-middleware if it's applicable to your situation. In an HTTP server system the code looks like this: https://expressjs.com/en/guide/using-middleware.html but you'd have to think about how you'd want to implement it for your angular app — Isaac, Aug 07 '17 at 04:42
Yes u are right , i have to write the code but because this is company's project so that;s why i have not permission to do so. — Rahul Choudhary, Aug 07 '17 at 04:47
May be this would be of some help... https://medium.com/@burimshala/how-to-implement-middleware-in-angular-using-ui-router-b3267dddbae8 — zaidfazil, Aug 07 '17 at 05:38
Which router are you using [ngRoute](https://docs.angularjs.org/api/ngRoute) or [ui-router](https://ui-router.github.io/ng1/)? In either case use the `resolve` property in the route/state config to define functions to check conditions before entering that route/state. Either return a rejected promise or use a [throw statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/throw) to prevent transition to that route/state. — georgeawg, Aug 07 '17 at 09:22
Possible duplicate of [AngularJs : Cancel route resolve without promise](https://stackoverflow.com/questions/45169638/angularjs-cancel-route-resolve-without-promise). — georgeawg, Aug 07 '17 at 15:42

score 0 · Answer 1 · answered Aug 07 '17 at 14:06

angular has somrthing about this, you can use it. its name is token-injector and interceptor:

var interceptor = [
'$rootScope', '$q', "Base64", function(scope, $q, Base64) {
    function success(response) {
        return response;
    }

    function error(response) {
        var status = response.status;
        if (status == 401) {
            window.location = "/login";
            return;
        }
        return $q.reject(response);
    }
    return function(promise) {
        return promise.then(success, error);
    }
}];

Thanks your solution is fine. – Rahul Choudhary Aug 07 '17 at 23:08 — Rahul Choudhary, Aug 07 '17 at 23:08

score 0 · Accepted Answer · answered Aug 07 '17 at 15:48

To cancel a route change from a resolver function, use a throw statement:

monApp.config(function ($routeProvider, $locationProvider){

    var rsf = { 
        // This function tells if user is logged or not
        "check":function(stockeUtilisateur,$location,Notification){
            bar u = stockeUtilisateur.getUtilisateur();

            if(u.role=='admin'||u.role=='utilisateur'){
                Notification.success("Youre logged");
            }
            else{ 
                throw "Not logged in";
            }

        }
    };

    $routeProvider
    .when('/login', {
      templateUrl: 'vues/login.html',
      controller: 'neutreCtrl'
    })
    .when('/compte', {
      templateUrl: 'vues/compte.html',
      controller: 'compteCtrl',
      resolve:rsf 
    })

    .otherwise({redirectTo: '/login'}); 
})

When a resolver function throws an error, the route change is prevented and a $routeChangeError event is broadcast.

How to put check condition(i.e user is logged in or not) before every API call in front end?

2 Answers2