ruby-on-rails - 如何在 AngularJS 中实现 "Keep me logged in"功能

Question

我正在开发 AngularJs 应用程序，后端是在 Ruby on Rails 中开发的。我们没有使用 Devise gem 进行用户身份验证。整个用户认证过程是用 AngularJs 编写的。现在我想使用 AngularJs 向我的应用程序添加“保持登录”功能。

题:
如何在 AngularJs 中为我的应用程序实现“保持登录状态”功能？

我将 angularJs 用于 View 和 Controller ，并且模型是用 Ruby on Rails 编写的。

我在下面附上了我的 session-controller.js 和 View 文件。

session-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 name@domain.com.",
                    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._-]+@[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

我想要的是如果用户点击“记住我”复选框，那么下次，用户确实需要登录系统。如何使用 AngularJs 实现？

Answer 1

您可以将此类选项保留在用户的本地存储中，但要小心放置在那里的内容，它应该存储访问 token 或加密数据，避免以纯文本形式存储用户凭据，请参阅此链接以了解如何使用带有 Angular 的本地存储:
https://github.com/grevory/angular-local-storage

希望有帮助