我使用Angularjs构建了一个登录身份验证应用程序。我想对该应用程序进行更改以使其成为用户访问控制应用程序。我怎样才能做到这一点？任何建议都可以帮助我继续完成我的应用程序。应该做出哪些更改以及我应该从哪里开始构建user access control application。我对angularjs来说是全新的。请帮我。谢谢。
示例：管理员应该有权访问所有视图。 User1应该只能访问查看relaydata和日志。 User2应该可以访问sensordata和日志。
这是我的主要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');
}
});
}
]);
这是我使用cookiestore登录身份验证的service.js
'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;
}
};
});
答案 0 :(得分：0)
您可以使用$ stateProvider的resolve属性，如
.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"); }],
}
});
}])