4

我正在開發AngularJs應用程序,後端是在Ruby on Rails中開發的。我們還沒有使用Devise gem進行用戶認證。整個用戶認證過程是用AngularJs編寫的。現在我想使用AngularJs爲我的應用程序添加「保持登錄狀態」功能。如何在AngularJS中實現「保持登錄狀態」功能

問題: 如何在AngularJs中爲我的應用程序實現「讓我登錄」功能?

我使用angularJs的視圖和控制器和模型是用Ruby on Rails編寫的。

我已將下面的session-controller.js附加到視圖文件中。

會話controller.js

App.controller('SessionsCtrl', function($rootScope, $scope, $http, $location, Facebook, $timeout, flash, $remember) { 

    $scope.fbloginContent = ""; 

    $scope.googleloginContent = ""; 

    $scope.linkedinloginContent = ""; 

    $scope.$on('facebook_login', function() { 
     $timeout(function() { 
      $scope.fbloginContent = Facebook.getfbLoginContent(); 
      $scope.loginEmail = $scope.fbloginContent.email; 
     }, 2000); 
    }); 

    $scope.$on('google_login', function() { 
     $timeout(function() { 
      $scope.googleloginContent = helper.getGoogleloginContent(); 
      $scope.loginEmail = $scope.googleloginContent.email; 
     }, 2000); 
    }); 

    $scope.$on('linkedin_login', function() { 
     $timeout(function() { 
      $scope.linkedinloginContent = linkedInHelper.linkedinloginContent(); 
      $scope.loginEmail = $scope.linkedinloginContent['emailAddress']; 
     }, 2000); 
    }); 

    $scope.login = function() { 
     if ($('#signInForm').valid()) { 
      if ($scope.linkedinloginContent) { 
       var param = { 
        "user" : { 
         "email" : $scope.linkedinloginContent['emailAddress'], 
         "password" : $scope.loginPassword 
        } 
       }; 
      } else if ($scope.googleloginContent) { 
       var param = { 
        "user" : { 
         "email" : $scope.googleloginContent.email, 
         "password" : $scope.loginPassword 
        } 
       }; 
      } else if ($scope.fbloginContent) { 
       var param = { 
        "user" : { 
         "email" : $scope.fbloginContent.email, 
         "password" : $scope.loginPassword 
        } 
       }; 
      } else { 
       if ($scope.loginEmail && $scope.loginPassword) { 

        var param = { 
         "user" : { 
          "email" : $scope.loginEmail, 
          "password" : $scope.loginPassword 
         } 
        }; 
       } else { 
        var param = { 
         "user" : { 
          "email" : $("#signInForm [name=email]").val(), 
          "password" : $("#signInForm [name=password]").val() 
         } 
        }; 
       } 
      } 
      $http({ 
       method : 'post', 
       url : '/api/sessions', 
       data : param 
      }).success(function(data, status) { 
       createCookie("access_token", data.user.access_token, ''); 
       createCookie("user", data.user.id, ''); 
       createCookie("name", data.user.name, ''); 
       if (data.user.temp_password == true && data.user.login_count == 1) { 
        $location.path('/changepassword'); 
       } else { 
        if (data.user.role == "SmartonAdmin") { 
         $location.path('/api/users'); 
         flash.info = ($rootScope.config && $rootScope.config.login_message) ? $rootScope.config.login_message : "Logged in successfully"; 
         goToTop(); 
         if (data.user.login_count == 1) { 
          $('#intro-video').modal('show'); 
         } 
        } else { 
         $location.path('/student_dashboard'); 
         flash.info = ($rootScope.config && $rootScope.config.login_message) ? $rootScope.config.login_message : "Logged in successfully"; 
         goToTop(); 
         if (data.user.login_count == 1) { 
          $('#intro-video').modal('show'); 
         } 
        } 
       } 
      }).error(function(data, status) { 
       flash.error = data.errors; 
       goToTop(); 
      }); 
     } 
    }; 

    $scope.validations = function() { 

     $('#signInForm').validate({ 
      rules : { 
       email : { 
        required : true, 
        email : true 
       }, 
       password : { 
        required : true, 
       } 
      }, 
      messages : { 
       email : { 
        required : "Email can't be blank.", 
        email : "Email must be in the format of [email protected]", 
        remote : "Email already exists." 
       }, 
       password : { 
        required : "Password can't be blank.", 
        minlength : "Password should have minimum of 8 characters.", 
        maxlength : "Password should not exceed more than 15 characters." 
       } 
      }, 
      errorPlacement : function(error, element) { 
       error.insertBefore('.errorMsg1'); 
      } 
     }); 

    }; 

    $scope.validations(); 

    $("#loginemail").keyup(function() { 
     if (!this.value) { 
      $(".errormsg").css("display", "none"); 
     } 
     if (!(/^[a-zA-Z0-9._-][email protected][a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(this.value))) { 
      $(".errormsg").css("display", "none"); 
     } 
    }); 

    $("#loginpassword").keyup(function() { 
     if (!this.value) { 
      $(".errormsg").css("display", "none"); 
     } 
    }); 

    $scope.showForgotPasswordForm = function() { 
     $('#signInForm').css('opacity', '0.5'); 
     $('#forgotPassForm').show(); 
    }; 

    $scope.remember = false; 
     if ($remember('email') && $remember('password')) { 
      $scope.remember = true; 
      $scope.email = $remember('email'); 
      $scope.password = $remember('password'); 
     } 
     $scope.rememberMe = function() { 
      if ($scope.remember) { 
       $remember('email', $scope.email); 
       $remember('password', $scope.password); 
      } else { 
       $remember('email', ''); 
       $remember('password', ''); 
      } 
     }; 

}); 

意見文件作爲模板(AngularJs):

<input type="checkbox" name="remember" class="signup-footage terms-condition " data-ng- click="rememberMe()" data-ng-model="remember"> Remember Me 

我想要什麼,如果用戶點擊 「記住我」 複選框,然後單擊Next時間,用戶確實需要登錄到系統。如何使用AngualarJs實現?

回答

1

您可以在用戶的​​本地存儲中保留這種選項,但要小心您放置的位置,應該存儲訪問令牌或加密數據,避免以純文本存儲用戶憑據,請參閱此鏈接看你如何使用角存儲本地存儲: https://github.com/grevory/angular-local-storage

希望可以幫到