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