如何在我现有的 Angularjs 应用程序中进行用户访问控制

Question

我使用 Angularjs 构建了一个登录验证应用程序。我想对该应用程序进行更改，使其成为用户访问控制应用程序。我怎样才能做到这一点？任何建议都将帮助我继续完成我的 app.What 更改，我应该从哪里开始构建 user access control application。我是 angularjs 的新手。请帮我。谢谢你。

示例： 管理员应该有权访问所有视图。 User1 应该只能查看中继数据和日志。 User2 应该有权访问传感器数据和日志。

这是我的主要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;
        }
    };

});

Answer 1

您可以使用 $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"); }],
    }
  });

}])

如何在我现有的 Angularjs 应用程序中进行用户访问控制

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

angularjs

angular-ui-router

angularjs-scope