Question

我正在开发AngularJs应用程序，后端是在Ruby on Rails上开发的。我们还没有使用Devise gem进行用户身份验证。整个用户身份验证过程是用AngularJs编写的。现在我要添加＆＃34;让我登录＆＃34;使用AngularJs的应用程序的功能。

问题：我如何实施＆＃34;让我登录＆＃34;我的应用程序在AngularJs中的功能？

我使用angularJs作为视图和控制器，模型是用Ruby on Rails编写的。

我已将下面的session-controller.js附加到views文件。

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

我想要的是如果用户点击＆＃34;请记住我＆＃34;复选框，然后下次用户确实需要登录系统。如何使用AngualarJs实现？

Answer 1

您可以在用户的本地存储中保留此类选项，但请注意放在那里的内容，它应存储访问令牌或加密数据，避免将用户的凭据存储在普通文件中文本，请参阅此链接以了解如何使用带有角度的本地存储： https://github.com/grevory/angular-local-storage

希望有所帮助

如何在AngularJS中实现“保持登录状态”功能

1 个答案: