douchuang1861 2014-05-20 14:51
浏览 37
已采纳

AngularJS登录

I am trying to make a login for my website. Everything is working and I am currently logged in. Everytime I refresh the page the username and password will dissappear so my login will also dissappear. I do not want that to happen. So what can I do to keep the data in the scopes after a refresh? I get from my php a username password and a permission back and i set the loggedIn to true for my ng-show.

loginController.js

app.controller('loginController', ["$scope", "$http", function($scope, $http){
$scope.info = {
    uname :'',
    pass : ''
};
$scope.loggedIn = false;
$scope.name ={};
$scope.pass = {};

$scope.logout = function(loggedIn){
   loggedIn=false;
};

$scope.users={};


$scope.logThatShitIn = function(info, name){ 
    $http.post("php/userData.php",info)
        .success(function(data){
            $scope.name = data.user;
            $scope.pass = data.pass;
            $scope.loggedIn = 'true';
        }
    );        
};
}]);

index.html -> my header

    <body ng-controller='loginController'>
    <div class="header">
        <div class="headerName left">
            <div class="headerNameText lname right">
                lname
            </div>

            <div class="headerNameText fname right">
                fname
            </div>
        </div>
        <div class="nav left">
            <ul>
                <li class="navText">
                    <a ui-sref="dishes">Dishes</a>
                </li>

                <li class="navText">
                    <a ui-sref="addRecipe" ng-show='loggedIn'>Add Recipe</a>
                </li>
            </ul>
        </div>
        <div class="loginHeader right">
            <div class="loginButton" ng-hide='loggedIn'>
                <a ui-sref="login">log in</a>
            </div>

            <div class="logoutButton custFont" ng-show='loggedIn'>
                <a href='#' ng-click='loggedIn = false'>log out</a>
            </div>

            <div class="loggedIn" ng-show='loggedIn'>
                <p>welcome {{name}} !!</p>
            </div>

        </div>

login.html

<div>
<form name="login" ng-submit="logThatShitIn(info)">
    <label>Username</label><br/>
    <input type=text ng-model="info.uname" placeholder="Username"><br/><br/>
    <label>Password</label><br/>
    <input type="password" ng-model="info.pass" placeholder="Password"><br/><br/>
    <input type='submit' value="Log in!"/>
</form>

<div ng-show='loggedIn'>
    {{name}}
</div>

  • 写回答

1条回答 默认 最新

  • douao3063 2014-05-20 15:01
    关注

    If you want the user to remain logged in after refreshing the page you will have to store their information on the client.

    Try using $cookieStore to store their username and password in your log in function:

    $cookieStore.put('username', name);
    $cookieStore.put('password', pass);
    

    Then you can retrieve the credentials and log in on a refresh in your app.run block. Put your login function into a loginService and inject it in app.run.

    app.run(['loginService', function(loginService){
        var username = $cookieStore.get('username');
        var password = $cookieStore.get('password');
        loginService.login(username, password);
    }]);
    

    documentation on $cookieStore

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!