How can i make user access control in my existing Angularjs app

Issue

I build a login auth application using Angularjs. I want to make changes to that application to make it user access control app. How can I achieve that? Any suggestions would help me to move forward to complete my app.What changes should be made and where should I start to build the user access control application .I’m totally new to angularjs. Please help me. Thank you.

Example: Admin should have access to all the views. User1 should have only access to view relaydata and logs. User2 should have access to sensordata and logs.

This is my main app.js
‘use strict’;

//  modules
angular.module('Authentication', []);
angular.module('Home', []);

angular.module('HttpAuth', [
    'Authentication',
    'Home',
    'ui.router',
    'ngCookies'
])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('login', {
            url: '/login',
            views: {
                'login': {
                    controller: 'LoginController',
                    templateUrl: '/views/login.html'
                }
            }
        })

        .state('home', {
            url: '/home',
            cache: false,
            views: {
                'home': {
                    controller: 'HomeController',
                    templateUrl: '/views/home.html'
                }
            }

        })
        .state('home.relay', {
            url: '/relay',
            cache: false,
            views: {
                'relay': {
                    templateUrl: "/views/relay.html"
                }
            }
        })
        .state('home.relay.g1', {
            url: '/:gid/:uid',
            views: {
                'relaydata': {
                    templateUrl: '/views/group1.html',
                    controller: 'ruleCtrl'
                }
            }
        })
        .state('home.relay.g2', {
            url: '/:gid/:uid',
            views: {
                'relaydata': {
                    templateUrl: '/views/group2.html',
                    controller: 'scheduleCtrl'
                }
            }
        })
        .state('home.relay.g3', {
            url: '/:gid/:uid',
            views: {
                'relaydata': {
                    templateUrl: '/views/group3.html',
                    controller: 'intervalCtrl'
                }
            }
        })
        .state('home.sensor', {
            url: '/sensor',
            views: {
                'sensor': {
                    templateUrl: "/views/visualization.html",
                    controller: 'sensorCtrl'
                }
            }
        })
        .state('home.sensor.config', {
            url: '/:gid',
            cache: false,
            views: {
                'sensordata': {
                    templateUrl: "/views/sensorsConfig.html",
                    controller: 'sensorConfigCtrl'
                }
            }
        })
        .state('home.logs', {
            url: '/logs',
            views: {
                'logs': {
                    templateUrl: "/views/logs.html",
                    controller: 'logsCtrl'
                }
            }
        })
    $urlRouterProvider.otherwise('/home/relay');
}])

.run(['$rootScope', '$location', '$cookieStore', '$http',
    function ($rootScope, $location, $cookieStore, $http) {
        // keep user logged in after page refreshed
        $rootScope.globals = $cookieStore.get('globals') || {};
        if ($rootScope.globals.currentUser) {
            $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata;
        }

        $rootScope.$on('$locationChangeStart', function (event, next, current) {
            // redirect to login page if not logged in
            if ($location.path() !== '/login' && !$rootScope.globals.currentUser) {
                $location.path('/login');
            }
            // redirect to home if token exists
            var cookie = $cookieStore.get('Token');
             if (cookie) {
                 $location.path('/home/relay');

             }
        });
    }
]);

This is my service.js for login auth using cookiestore

  'use strict';

 angular.module('Authentication')

.factory('AuthenticationService', ['Base64', '$http', '$cookieStore', '$rootScope', '$timeout',
    function (Base64, $http, $cookieStore, $rootScope, $timeout) {
        var service = {};
        service.Login = function (callback) {
            //authenticate data using http
            $http.post('/v1/user/login')
                .then(function (response) {
                    callback(response);
                },function(err){
                    Materialize.toast('Incorrect Username or Password', 4000);
                });
        };

        //set credentials
        service.SetCredentials = function (username, password) {
            var authdata = Base64.encode(username + ':' + password);
            $rootScope.globals = {
                currentUser: {
                    username: username,
                    authdata: authdata
                }
            };
            $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
            $cookieStore.put('globals', $rootScope.globals);
        };
        // clear credentials
        service.ClearCredentials = function () {
            $rootScope.globals = {};
            $cookieStore.remove('globals');
            $http.defaults.headers.common.Authorization = 'Basic ';
        };
        return service;
    }
])
//token service
.factory('TokenService', ['Base64', '$http', '$cookieStore', '$rootScope', '$timeout',
    function (Base64, $http, $cookieStore, $rootScope, $timeout) {
        var service = {};
        service.SetToken = function (jwt) {
            $http.defaults.headers.common['x-token'] = jwt;
            $cookieStore.put('Token', jwt);
        };
        return service;
    }
])

// Base64 
.factory('Base64', function () {


    var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

    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 A-Z, a-z, 0-9, +, /, or =
            var base64test = /[^A-Za-z0-9\+\/\=]/g;
            if (base64test.exec(input)) {
                window.alert("There were invalid base64 characters in the input text.\n" +
                    "Valid base64 characters are A-Z, a-z, 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;
        }
    };

});

Solution

You can use resolve attribute of $stateProvider like

.config(["$stateProvider", function ($stateProvider) {

  $stateProvider

  .state("forbidden", {
    /* ... */
  })

  .state("signIn", {
    /* ... */
    resolve: {
      access: ["Access", function (Access) { return Access.isAnonymous(); }],
    }
  })

  .state("home", {
    /* ... */
    resolve: {
      access: ["Access", function (Access) { return Access.isAuthenticated(); }],
    }
  })

  .state("admin", {
    /* ... */
    resolve: {
      access: ["Access", function (Access) { return Access.hasRole("ROLE_ADMIN"); }],
    }
  });

}])

Answered By – Mohammad Raheem

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.