授权服务在angularjs中的页面刷新失败

Question

使用帖子实现授权--问题是当我转到特权页面时--比如'/ admin‘--它可以工作，但是当我手动刷新页面时，管理页就会重定向到’/未经授权的‘页面

权限服务

angular.module('myApp')
    .factory('PermissionsService', function ($rootScope,$http,CookieService) {
        var permissionList;
        return {
            setPermissions: function(permissions) {
                permissionList = permissions;
                $rootScope.$broadcast('permissionsChanged')
            },
            getPermissions: function() {
                var roleId = 5
                if(CookieService.getLoginStatus())
                    var roleId = CookieService.getUserData().ROLE_ID;

                return $http.post('api/user-permissions', roleId).then(function(result){
                    return result.data;
                });
            },
            hasPermission: function (permission) {
                permission = permission.trim();
                return _.some(permissionList, function(item) {
                    if(_.isString(item.name))
                        return item.name.trim() === permission
                });
            }
        };
    });

hasPermissions指令

angular.module('myApp')
    .directive('hasPermission', function(PermissionsService) {
        return {
            link: function(scope, element, attrs) {
                if(!_.isString(attrs.hasPermission))
                    throw "hasPermission value must be a string";

                var value = attrs.hasPermission.trim();
                var notPermissionFlag = value[0] === '!';
                if(notPermissionFlag) {
                    value = value.slice(1).trim();
                }

                function toggleVisibilityBasedOnPermission() {
                    var hasPermission = PermissionsService.hasPermission(value);

                    if(hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag)
                        element.show();
                    else
                        element.hide();
                }
                toggleVisibilityBasedOnPermission();
                scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
            }
        };
    });

app.js

var myApp = angular.module('myApp',['ngRoute','ngCookies']);

myApp.config(function ($routeProvider,$httpProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'app/module/public/index.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .when('/login', {
            templateUrl: 'app/module/login/login.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .when('/home', {
            templateUrl: 'app/module/home/home.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .when('/register', {
            templateUrl: 'app/module/register/register.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .when('/admin', {
            templateUrl: 'app/module/admin/admin.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html',
            permission: 'admin'
        })
        .when('/unauthorized', {
            templateUrl: 'app/partials/unauthorized.html',
            header: 'app/partials/header.html',
            footer: 'app/partials/footer.html'
        })
        .otherwise({redirectTo: '/'});

    $httpProvider.responseInterceptors.push('securityInterceptor');
});

myApp.provider('securityInterceptor', function() {
    this.$get = function($location, $q) {
        return function(promise) {
            return promise.then(null, function(response) {
                if(response.status === 403 || response.status === 401) {
                    $location.path('/unauthorized');
                }
                return $q.reject(response);
            });
        };
    };
});

myApp.run(function($rootScope, $location, $window, $route, $cookieStore, CookieService, PermissionsService) {
    PermissionsService.getPermissions().then(function(permissionList){
        PermissionsService.setPermissions(permissionList);
    });

    // Check login status on route change start
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
        if(!CookieService.getLoginStatus() && $location.path() != '/register' && $location.path() != '/login') {
            $location.path("/");
            $rootScope.$broadcast('notloggedin');
        }

        if(CookieService.getLoginStatus() && $location.path() == '/login') {
            $location.path("/home");
        }

        var permission = next.$$route.permission;
        if(_.isString(permission) && !PermissionsService.hasPermission(permission))
            $location.path('/unauthorized');

    });

    // Adds Header and Footer on route change success
    $rootScope.$on('$routeChangeSuccess', function (ev, current, prev) {
        $rootScope.flexyLayout = function(partialName) { return current.$$route[partialName] };
    });
});

CookieService

angular.module('myApp')
    .factory('CookieService', function ($rootScope,$http,$cookieStore) {
        var cookie = {
            data: {
                login: false,
                user: undefined
            },
            saveLoginData: function(user) {
                cookie.data.login = true;
                cookie.data.user = user;
                $cookieStore.put('__iQngcon',cookie.data);
            },
            deleteLoginData: function() {
                cookie.data.login = false;
                 cookie.data.user = undefined;
                 $cookieStore.put('__iQngcon',cookie.data);
            },
            getLoginStatus: function() {
                if($cookieStore.get('__iQngcon') === undefined)
                    return cookie.data.login;

                return $cookieStore.get('__iQngcon').login;
            },
            getUserData: function() {
                return $cookieStore.get('__iQngcon').user;
            }
        };

        return cookie;
    });

在页面刷新时，权限数据似乎丢失了。我还有别的办法可以解决这个问题吗？或者密码有什么问题吗？

Answer 1

我们不得不思考了一段时间，并做了以下的改变，以使它发挥作用。这可能不是最好的做法，但你为我工作。如果有人在评论中提出更好的解决方案，我将不胜感激。

myApp.run(function($rootScope, $location, $window, $route, $cookieStore, CookieService, PermissionsService) {
    var permChanged = false;

    PermissionsService.getPermissions().then(function(permissionList){
        PermissionsService.setPermissions(permissionList);
    });

    // Check login status on route change start
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
        console.log('$routeChangeStart');
        if(!CookieService.getLoginStatus() && $location.path() != '/register' && $location.path() != '/login') {
            $location.path("/");
            $rootScope.$broadcast('notloggedin');
        }

        if(CookieService.getLoginStatus() && $location.path() == '/login') {
            $location.path("/home");
        }

        $rootScope.$on('permissionsChanged', function (ev, current, prev) {
            permChanged = true;
        });

        if(CookieService.getLoginStatus() && permChanged) {
            var permission = next.$$route.permission;
            if(_.isString(permission) && !PermissionsService.hasPermission(permission))
                $location.path('/unauthorized');
        }

    });

    // Adds Header and Footer on route change success
    $rootScope.$on('$routeChangeSuccess', function (ev, current, prev) {
        $rootScope.flexyLayout = function(partialName) { return current.$$route[partialName] };
    });
});

我所做的是等待权限被设置，然后使用permissionChanged广播将permChanged变量设置为true，然后与if用户loggedin状态和permchanged组合起来，以检查权限(如果有)。

$rootScope.$on('permissionsChanged', function (ev, current, prev) {
                permChanged = true;
            });

            if(CookieService.getLoginStatus() && permChanged) {
                var permission = next.$$route.permission;
                if(_.isString(permission) && !PermissionsService.hasPermission(permission))
                    $location.path('/unauthorized');
            }

Answer 2

当我手动刷新该页面时，管理页将重定向到‘/un胃’页面

这不是预期的行为吗？如果您重新加载页面；那么所有UI状态都会丢失；这就像关闭应用程序并从头开始一样。

在页面刷新时，权限数据似乎丢失了。我还有别的办法可以解决这个问题吗？或者密码有什么问题吗？

如果您希望能够在页面重新加载后保留UI状态，则必须以某种方式保留登录信息，例如在浏览器cookie中。当应用程序加载时，检查该cookie值。如果存在，您可以从数据库加载用户信息，实质上是对登录进行镜像。

在没有某种加密的情况下，我会谨慎地将实际的用户凭据存储在cookie中。我使用的一种方法是存储一个唯一的用户密钥，该密钥可以发送到DB以加载用户信息。有时，这可能是与用户关联的UUID，避免使用自动递增主键，因为这很容易更改以访问其他用户的帐户。