Javascript 如何将“注销”按钮更改为“登录”

我有登录和注销按钮，可以在登录后动态更改

<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>

登录控制器，其中我将令牌存储在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');
    }]);

更新：

比如说登录后，它从“主页”路由到“AboutUs”页面，按钮显示为“注销”，然后如果我注销，它路由回“主页”，按钮显示为“登录”

---

但问题是登录后，如果我手动路由到“主页”，然后单击“注销”按钮，即使令牌设置为空，按钮仍保持为“注销”

在两个位置使用ng show或在两个位置使用ng hide，并且在成功注销时使标志令牌与当前相反。这必须起作用在两个位置使用ng show或在两个位置使用ng hide，并且在成功注销时使标志令牌与当前相反。这必须起作用。您可以尝试执行以下操作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>

---

我希望它对你有用

您可以尝试在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>

---

---

我希望它对你有用

什么

console.log（“注销后的令牌是：”+store.get（'jwt'））

logged？当您注销时，

console.log（$scope.token）

的什么输出似乎没有从存储中删除令牌，这可能就是为什么按钮没有更改。在AuthServiceToken中删除令牌删除令牌不是问题。我确信在注销时会被删除。我在注销后检查了ITA，

store.get（'jwt'）

what

console.log（“注销后的令牌是：”+store.get（'jwt'）））

logged？当您注销时，

console.log（$scope.token）

的什么输出似乎没有从存储中删除令牌，这可能就是为什么按钮没有更改。在AuthServiceToken中删除令牌删除令牌不是问题。我确信在注销时会被删除。我在注销后检查了它

store.get（'jwt'）

标记的值不是布尔值。它是存储中的jwt令牌，然后添加一个布尔标志，并且与该令牌绑定的标记不是布尔标记。它是存储中的一个jwt标记，然后添加一个布尔标志，并与标记一起使用，但当您刷新浏览器时，布尔值将设置为默认值右侧？？嘿，我已经更新了相同的标记。您能验证一下吗？嗨，库纳尔…实际上，注销后令牌为空。。对不起，我没回答这个问题。请看看我面临的问题。不客气。请对其进行更新投票，以便将来对其他人有所帮助。但当您刷新浏览器时，布尔值将设置为默认值右侧？？嘿，我已经更新了相同的值。您能验证一下吗？嗨，库纳尔…实际上，注销后令牌为空。。对不起，我没回答这个问题。请看看我面临的问题。不客气。请把它投上去，以便将来对别人有所帮助。

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.