如何在AngularJS中显示具有用户身份验证的按钮

您可以使用这样的指令：

<button access-level="canEdit">Edit</button>

并且您的指令绑定到accessLevel:

angular.module("app")
    .directive('accessLevel', ['AuthService', 'AUTH_EVENTS', function (authService, authEvents) {
        return {
            restrict: 'A',
            link: function ($scope, element, attrs) {
                var accessLevel;
                attrs.$observe('accessLevel', function (acl) {
                    if (acl) {
                        accessLevel = acl;
                        updateCss();
                    }
                });
                $scope.$on("auth-change", function (event, data) {
                    switch (data) {
                        case authEvents.logoutSuccess:
                        case authEvents.loginSuccess:
                            updateCss();
                            break;
                        case authEvents.notAuthorized:
                        default:
                    }
                });
                function updateCss() {
                    if (accessLevel) {
                        if (!authService.isAuthorized(accessLevel)) {
                            switch (element[0].nodeName) {
                                case "A":
                                    element.hide();
                                    break;
                                default:
                                    element.attr("disabled", "disabled");
                                    break;
                            }
                        } else {
                            switch (element[0].nodeName) {
                                case "A":
                                    element.show();
                                    break;
                                default:
                                    element.removeAttr("disabled");
                                    break;
                            }
                        }
                    }
                }
            }
        }
    }]);

这比你需要的多一点，但能让你知道你能实现什么。（您必须编写您的身份验证服务等）

例如，这里是我的身份验证服务的一部分：

angular.module('app')
    .factory("AuthService", ["$rootScope", "$http", "AuthSession", "AUTH_EVENTS", function ($rootScope, $http, AuthSession, AUTH_EVENTS) {
       AuthSession.load();
       $rootScope.$on('$stateChangeStart', function (event, nextState) {
            if (nextState.data && nextState.data.accessLevel && !service.isAuthorized(nextState.data.accessLevel)) {
                event.preventDefault();
                $rootScope.$broadcast('auth-change', AUTH_EVENTS.loginRequired, nextState.name);
            }
        });
        var service = {
            login: function (credentials) {
                return $http
                            .post('/api/account/login', credentials)
                            .success(function (data, status) {
                                if ((status < 200 || status >= 300) && data.length >= 1) {
                                    $rootScope.$broadcast("auth-change", AUTH_EVENTS.loginFailed);
                                    return;
                                }
                                AuthSession.create(data.AccessToken, data.User);
                                $rootScope.$broadcast("auth-change", AUTH_EVENTS.loginSuccess);
                            }).error(function (data, status) {
                                $rootScope.$broadcast("auth-change", AUTH_EVENTS.loginFailed);
                            });
            },
            logout: function () {
                AuthSession.destroy();
                $rootScope.$broadcast("auth-change", AUTH_EVENTS.logoutSuccess);
            },
            isAuthenticated: function () {
                return (AuthSession.token !== null);
            },
            isAuthorized: function (accessLevel) {
                if (!accessLevel) return true;
                return (this.isAuthenticated() && AuthSession.user.UserRoles.indexOf(accessLevel) !== -1);
            }
        }
        return service;
    }]);

该服务从服务器检索承载令牌，并将其存储在authsession服务中。用户角色也存储在其他用户信息的旁边。由于后端也是安全的，所以在客户端上更改用户角色的人不能写入后端。（客户端的一切只是为了用户的外观）

两种方式：

1. 创建概要文件后，让用户详细信息表中的isProfileCreated（您需要创建一个）列更新。在角载荷时，调用并检查是否创建了轮廓。如果为true，请使用ng-show来显示（编辑和删除按钮）。

2. 否则，如果要进行编辑，无论如何，您都需要从表中获取配置文件的详细信息。在这种情况下，如果没有创建概要文件，则让您的服务器发送false，如果创建了json对象，则让服务器发送json对象。在控制器中使用

   if（angular.isObject（profile））｛

           $scope.showeditbutton = true;
           $scope.showdeletebutton = true;
   

   }