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

使用 问题是当我进入一个特权页面，说“/admin”时，它可以工作，但当我刷新页面时 手动，管理页面将重定向到“/unauthorized”页面

权限服务

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

厨师服务

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;
    });

页面刷新时权限数据似乎丢失。我还有别的办法解决这个问题吗？或者代码有问题吗

当我手动刷新页面时，管理页面将重定向到 “/未经授权”页面

---

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

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

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

在没有某种加密的情况下，我会小心地将实际用户凭据存储在cookie中。

---

我使用的一种方法是存储一个唯一的用户密钥，该密钥可以发送到DB以加载用户信息。有时这可能是与用户相关联的UUID，请避免使用自动递增主键，因为要访问其他用户的帐户很容易更改主键。

Well必须考虑一段时间，并进行以下更改以使其正常工作。这可能不是最好的做法，但你为我工作过。如果有人在评论中提出更好的解决方案，我将不胜感激

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 user loggedin status和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');
            }

---

这不是预期的行为吗？如果重新加载页面；然后所有UI状态都丢失；这就像关闭应用程序，从头开始一样。如果您希望能够保留状态，您必须以某种方式保留登录信息——使用cookie并不少见。是吗？我认为应用程序会在页面刷新（myApp.run（））函数上再次运行，这意味着getPermission会获得权限并设置权限，这应该可以正常工作？？在PermissionService getPermission函数中，我正在检查用户是否登录，获取角色请求获取权限，并在获得权限后进行设置？我想我找到了解决方案，请参见我的答案。你认为这是一个好的解决方案吗？我承认我只是粗略地检查了一下你的代码。也许您已经有了基于cookie或其他方式加载用户权限的代码。什么是厨师服务？您的代码中引用了它，但没有共享详细信息。请查看我的更新问题以及Cookie服务的代码。顺便说一句，谢谢你的时间。我只是做了一个简短的回顾；但看起来您的CookieService已经在做我建议的事情了——将登录凭据保存为cookie值。假设登录后调用saveLoginData（）函数保存凭据；那么你的方法可能还可以。