如何更改登录按钮的状态有条件地退出 [英] How to change status of login button to logout conditionally
本文介绍了如何更改登录按钮的状态有条件地退出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是头HTML我的登录表单：
Here is my login form in header html:
<ul class="nav navbar-nav navbar-right" ng-controller="loginController">
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" ng-show="$scope.loggedIn"><b>Logout</b></a>
<a href="" class="dropdown-toggle" data-toggle="dropdown" ng-show="!$scope.loggedIn"><b>Login</b> <span class="caret"></span></a>
</li>
</ul>
使用的index.html UI路由器：
Index.html using ui-router:
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</body>
在登录控制器，我布尔值设置为true：
Inside the login Controller, I am setting the boolean value to true:
$scope.loggedIn = AuthenticationService.isLogged;
$scope.loginForm = function (email, password) {
if (email !== undefined && password !== undefined) {
UserService.logIn(email, password).success(function (data) {
$localStorage.token = data.token;
console.log("stored token is: " + $localStorage.token);
if ($localStorage.token) {
$state.go('LoggedIn');
}
}).error(function(status, data){
console.log(status);
console.log(data);
});
}
}
UserService：
UserService:
myApp.factory('UserService', function ($http, $localStorage, AuthenticationService) {
return {
logIn: function (email, password) {
return $http.post('rs/loginResource/login', {email: email, password: password});
AuthenticationService.isLogged = true;
},
logOut: function () {
if (AuthenticationService.isLogged) {
AuthenticationService.isLogged = false;
delete $localStorage.token;
}
}
};
});
认证服务：
myApp.factory('AuthenticationService', function() {
var auth = {
isLogged: false
};
return auth;
});
登录后，我的标志设置为true。但按钮名称没有改变注销。我使用的UI路由器改变状态。
After login, I am setting the flag to true. But the button name is not changing to Log out. I am using ui-router for changing states.
推荐答案
你永远设置 $ scope.isLogged ，只是改变了服务价值。我认为，你应该设置的AuthenticationService 里面的 UserService ，只是检查它在你的控制器
You're never setting $scope.isLogged, just changing the service value. I'd argue that you should set AuthenticationService inside of your UserService and just check it in your controller
logIn: function (email, password) {
return $http.post('rs/loginResource/login', {email: email, password: password})
.then(function(response){
//Some validation here to make sure that the user was successfully logged in
AuthenticationService.isLogged = true;
return response;
}).catch(function(error){/*error handling here */});
}
....
$scope.AuthenticationService = AuthenticationService;
$scope.loginForm = function (email, password) {
//delete this AuthenticationService.isLogged = true;
UserService.logIn(email, password).then(function(response){
var data = response.data;
$localStorage.token = data.token;
...
<a href="" class="dropdown-toggle" data-toggle="dropdown" ng-show="$scope.AuthenticationService.isLogged"><b>Logout</b></a>
<a href="" class="dropdown-toggle" data-toggle="dropdown" ng-show="!$scope.AuthenticationService.isLogged"><b>Login</b> <span class="caret"></span></a>
这篇关于如何更改登录按钮的状态有条件地退出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
