加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ruby-on-rails – 如何在AngularJS中实现“保持登录状态”功能

发布时间:2020-12-17 02:07:06 所属栏目:百科 来源:网络整理
导读:我正在开发AngularJs应用程序,后端是在 Ruby on Rails上开发的.我们还没有使用Devise gem进行用户身份验证.整个用户身份验证过程是用AngularJs编写的.现在我想使用AngularJs为我的应用程序添加“保持登录状态”功能. 题: ?我如何在AngularJs中为我的应用程
我正在开发AngularJs应用程序,后端是在 Ruby on Rails上开发的.我们还没有使用Devise gem进行用户身份验证.整个用户身份验证过程是用AngularJs编写的.现在我想使用AngularJs为我的应用程序添加“保持登录状态”功能.

题:
?我如何在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

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

解决方法

您可以在用户的??本地存储中保留此类选项,但要小心放在那里,它应该存储访问令牌或加密数据,避免以纯文本格式存储用户的凭据,请参阅此链接以了解如何使用带角度的本地存储:
https://github.com/grevory/angular-local-storage

希望有所帮助

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读