Question

我的登录和注销按钮在登录后动态变化。

<ul class="nav navbar-nav navbar-right" ng-controller="loginController">
    <li class="dropdown">
        <a href data-ng-show="token" ng-click="logout()"><b>Logout</b></a>
        <a href data-ng-hide="token" data-toggle="dropdown"><b>Login</b></a>
    </li>
</ul>

因此，在我登录后，该按钮会使用ng-hide更改为注销，但在我退出后，相同的按钮不会更改回登录状态？

我是否必须对变量进行范围监视？我有这样的代码使用ui-router并声明：

myApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {

    // For any unmatched url, redirect to /login
    $urlRouterProvider.otherwise("/Login");

    var header = {
        templateUrl: 'views/Header.html',
        controller: function ($scope) {
        }

    };
    var footer = {
        templateUrl: 'views/Footer.html',
        controller: function ($scope) {
        }
    };
    // Now set up the states
$stateProvider
    .state('Login', {
        url: "/Login",
        views: {
            header: header,
            content: {
                templateUrl: 'views/Login.html',
                controller: function ($scope) {
                }
            },
            footer: footer
        }
    })
    .state('LoggedIn', {
        url: "/LoggedIn",
        views: {
            'header': header,
            'content': {
                templateUrl: 'views/LoggedIn.html',
                controller: function ($scope) {
                }
            },
            'footer': footer
        },
        data: {
            requiresLogin: true
        }
    });

登录控制器，我将令牌存储在localstorage中（在我的情况下为store），以使用ng-show更新登录/注销按钮

myApp.controller('loginController', ['$rootScope', '$scope', 'Auth', '$state', 'jwtHelper', 'store',
    function ($rootScope, $scope, Auth, $state, jwtHelper, store) {

        function successAuth(res) {
            var decodedToken  = jwtHelper.decodeToken(res.token);
            store.set('jwt', res.token);
            store.set('email', decodedToken.email);

            if (store.get('jwt')) {
                $state.go("LoggedIn");
            } else {
                alert("Invalid username or password");
            }
        }

        $scope.signup = function () {
            var formData = {
                email: $scope.email,
                password: $scope.password
            };

            Auth.signup(formData, successAuth, function () {
                $rootScope.error = 'Failed to signup';
            });
        };

        $scope.logout = function ()
        {
            Auth.logout(function () {
                $state.go("Login");
                console.log("token after logout is :" + store.get('jwt'));
            });
        };
        $scope.token = store.get('jwt');
    }]);

更新

让我们说，登录后，它的路由来自＆＃34; Home＆＃34;到＆＃34;关于我们＆＃34;页面按钮显示为＆＃34;退出＆＃34;如果我退出，它会路由回到＆＃34; Home＆＃34;按钮显示为＆＃34;登录＆＃34;

但问题是登录后如果我手动路由到＆＃34; Home＆＃34;然后我点击＆＃34;退出＆＃34;按钮，按钮保持为＆＃34;退出＆＃34;即使将token设置为null;

Answer 1

您可以尝试在html中进行以下更改：

<ul class="nav navbar-nav navbar-right" ng-controller="loginController">
    <li class="dropdown">
        <a href ng-if="isLogin" ng-click="logout()"><b>Logout</b></a>
        <a href ng-if="!isLogin" data-toggle="dropdown"><b>Login</b></a>
    </li>
</ul>

javascript中的修改将是：

function successAuth(res) {
            var decodedToken  = jwtHelper.decodeToken(res.token);
            store.set('jwt', res.token);
            store.set('email', decodedToken.email);

            if (store.get('jwt')) {
                $state.go("LoggedIn");
                $scope.isLogin = true; // Added a new scope
            } else {
                alert("Invalid username or password");
            }
        }

$scope.logout = function ()
    {
        Auth.logout(function () {
            $state.go("Login");
            $scope.isLogin = false; // Added a new scope
            console.log("token after logout is :" + store.get('jwt'));
        });
    };

$scope.isLogin = !angular.isUndefined(store.get('jwt')); // Add this line also.

我希望它适合你。!!

Answer 2

在两个地方都使用ng-show或在两个地方使用ng-hide，并且在注销成功时，使标志标记与当前标记相反。必须工作

如何更改注销按钮以角度登录

2 个答案: