Authentication Angularjs菜单登录注销加载

我正在一个项目中使用Angularjs

对于登录注销，我将设置一个范围变量，如下所示：

$scope.showButton = MyAuthService.isAuthenticated();

MyApp.directive('logoutbutton', function(MyAuthService) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controller) {
            attrs.$observe('logoutbutton', function() {
                updateCSS();
            });

            function updateCSS() {
                if (MyAuthService.isAuthorized()) {
                    element.css('display', 'inline');
                } else {
                    element.css('display', 'none');
                }
            }


        }
    }
});

类似的

<li ng-show="showLogout"><a href="#/logout" ng-click="logOut()">Logout</a></li>

在标记中：

<li ng-class=" showLogout ? 'showLogout' : 'hideLogOut' "><a href="#/logout" ng-click="logOut()">Logout</a></li> 

那也不走运

---

注销成功时以及成功登录后，如何隐藏它？如何显示注销按钮？

在MyAuthService.isAuthenticated上设置一个监视，并在启动时，将范围变量设置为该服务调用的结果。在您的第一个示例中，当控制器初始化时，范围变量只设置一次，我假设这就是它运行的地方。您可以在控制器中设置手表，如果要使用指令，可以在指令链接功能中设置手表

大概是这样的：

$scope.showButton = MyAuthService.isAuthenticated();

$scope.$watch(MyAuthService.isAuthenticated, function(newVal, oldVal){
   $scope.showButton = newVal;
});

---

在MyAuthService.isAuthenticated上设置一个监视，当触发时，将范围变量设置为该服务调用的结果。在您的第一个示例中，当控制器初始化时，范围变量只设置一次，我假设这就是它运行的地方。您可以在控制器中设置手表，如果要使用指令，可以在指令链接功能中设置手表

大概是这样的：

$scope.showButton = MyAuthService.isAuthenticated();

$scope.$watch(MyAuthService.isAuthenticated, function(newVal, oldVal){
   $scope.showButton = newVal;
});

编辑：在阅读MarkRajcok评论后，我意识到这个解决方案是从业务逻辑层耦合视图，并且它公开了要在服务逻辑之外更改的服务变量，这是不可取的，而且容易出错，所以BoxerBucks提出的$scope.$watch解决方案可能更好，抱歉

您可以在BoxerBucks的回答中使用$scope.$watch，但我认为使用watchers不适合服务，因为通常您希望访问不同控制器中的服务变量，希望在更改该服务变量时，所有注入该服务的控制器都会自动更新，所以我相信这是解决你问题的好方法：

在MyAuthServices中，执行以下操作：

app.service('MyAuthService', function(...){
    var MyAuthServiceObj = this;

    this.authenticated=false; // this is a boolean that will be modified by the following methods:

    // I supose that you have methods similar to these ones
    this.authenticateUser(...){
        ...
        // At some point you set the authenticated var to true
        MyAuthServiceObj.authenticated = true;
    }

    this.logout(){
        ....
        // At some point you set the authenticated var to false
        MyAuthServiceObj.authenticated = false;
    }

});

然后在控制器中执行以下操作：

$scope.myAuthService = MyAuthService;

最后，在html中：

ng-show="myAuthService.authenticated"

这应该可以在没有像BoxerBucks回答那样使用观察者的情况下工作

查看AngularJS提供者，了解如何正确使用服务。

编辑：阅读MarkRajcok评论后，我意识到该解决方案是从业务逻辑层耦合视图，并且它公开了要在服务逻辑之外更改的服务变量，这是不可取的，而且容易出错，所以BoxerBucks提出的$scope.$watch解决方案可能更好，抱歉

您可以在BoxerBucks的回答中使用$scope.$watch，但我认为使用watchers不适合服务，因为通常您希望访问不同控制器中的服务变量，希望在更改该服务变量时，所有注入该服务的控制器都会自动更新，所以我相信这是解决你问题的好方法：

在MyAuthServices中，执行以下操作：

app.service('MyAuthService', function(...){
    var MyAuthServiceObj = this;

    this.authenticated=false; // this is a boolean that will be modified by the following methods:

    // I supose that you have methods similar to these ones
    this.authenticateUser(...){
        ...
        // At some point you set the authenticated var to true
        MyAuthServiceObj.authenticated = true;
    }

    this.logout(){
        ....
        // At some point you set the authenticated var to false
        MyAuthServiceObj.authenticated = false;
    }

});

然后在控制器中执行以下操作：

$scope.myAuthService = MyAuthService;

最后，在html中：

ng-show="myAuthService.authenticated"

这应该可以在没有像BoxerBucks回答那样使用观察者的情况下工作

---

查看AngularJS提供商，了解如何正确使用服务。

您是否打算将showButton设置为该功能？使用$scope.showButton=MyAuthService.isAuthenticated；在JS和…中，我希望更改$scope.isAuthenticated=true；将立即更改我的视图。您的意思是将showButton设置为该功能吗？使用$scope.showButton=MyAuthService.isAuthenticated；在JS和…中，我希望更改$scope.isAuthenticated=true；会立刻改变我的观点。是的，这是一个比手动手表更优雅的解决方案。我将更新我的一些代码：@miguel我已经在使用你提到的服务，但它不起作用了。我已经提到它是我的问题，比如$scope.showButton=MyAuthService.isAuthenticated。你确定你上面给出的sudo代码是正确的吗？@BoxerBucks，虽然它看起来更优雅，但这种方法将视图与服务结合起来。视图应该只知道其控制器的$scope属性，而不知道服务属性。我更喜欢你在回答中使用的$watch方法。@arnold，检查一下这是从AngularJS视频I中拍摄的mentioned@MarkRajcok这是一个很好的观点，但是，为什么本视频的演示者Wes Alvaro将plunker作为如何使用服务进行跨应用程序/控制器通信的示例，如本幻灯片所示？您认为这是一种不好的做法吗？是的，这是一种比手动手表更优雅的解决方案。我将更新我的一些代码：@miguel我已经在使用你提到的服务，但它不起作用了。我已经提到它是我的问题，比如$scope.showButton=MyAuthService.isAuthenticated。你确定你上面给出的sudo代码是正确的吗？@BoxerBucks，虽然它看起来更优雅，但这种方法将视图与服务结合起来。视图应该只知道其控制器的$scope属性，而不知道服务属性。我更喜欢美元手表的方式

---

你的答案中有。@arnold，检查一下这是从AngularJS视频I中拍摄的mentioned@MarkRajcok这是一个很好的观点，但是，为什么Wes Alvaro是本视频共享的演示者，将plunker作为如何使用服务进行跨应用程序/控制器通信的示例，如本幻灯片所示？您认为这是一种不好的做法吗？仅供参考，您可以将$watch简化如下：$scope.$watchMyAuthService.isAuthenticated，function。。。{ ... };当然我拿了Miguel的plunkr并将其分叉-仅供参考，您可以将$watch简化如下：$scope.$watchMyAuthService.isAuthenticated，函数。。。{ ... };当然我拿了米格尔的枪，用叉子叉了起来-