AngularJs用户登录问题处理(交互及验证、阻止FQ处理)


Posted in Javascript onOctober 26, 2017

本文介绍了AngularJs用户登录的交互及验证、阻止FQ处理,具体如下

1. 静态页面搭建及ng的form表单验证实现:

<div class="register-frame-all">
  <div class="register-frame">
   <div class="register-msg">
    <i></i>
    <form name="loginForm" ng-submit="loginAction()">
     <div class="form-group">
      <div class="input-group">
       <span class="input-group-addon register-user"></span>
       <input autocomplete="off" type="number" class="form-control" placeholder="请输入手机号" required ng-model="loginData.loginName" name="loginName">
      </div>
      <div class="input-group">
       <span class="input-group-addon register-pwd"></span>
       <input type="password" class="form-control" placeholder="请输入密码" required ng-model="loginData.pwd" name="pwd">
      </div>
      <button type="submit" class="btn btn-block btn-danger"
        ng-disabled="!( (loginForm.loginName.$valid) && (loginForm.pwd.$valid) )">登录</button>
      <em></em>
     </div>
    </form>
   </div>
   <div class="register-pic" ng-style="registerRnum"></div>
  </div>
 </div>

2. 定义用户登录的控制器,在控制器中使用http服务处理登录接口:

$http({
    url:G.apiUrl_dl+'loginByPhone',
    method:'post',
    data:{
     'phone':loginName,
     'pwd':pwd
    },
    headers:{'Content-Type':'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
     var str = [];
     for(var p in obj){
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
     }
     return str.join("&");
    }
   }).success(function(data){
    // 登录成功后的操作...18     19    });

3. 如果登录成功后将用户的数据保存到cookie或session中 用$state服务进行跳转到指定的页面中:

// 登录成功
    if($scope.loginActionData.token){
     sessionStorage.setItem("token", $scope.loginActionData.token);
     sessionStorage.setItem("tsname", $scope.loginActionData.name);
     sessionStorage.setItem("rights", $scope.loginActionData.rights);
     sessionStorage.setItem("userId", $scope.loginActionData.userId);
     sessionStorage.setItem("departmentsId", $scope.loginActionData.departmentsId);
     sessionStorage.setItem("departmentsName", $scope.loginActionData.departmentsName);
     $state.go('index');
    }else{
     // 登录失败的弹框提示
     $('#loginAction').modal('show');
    }

4. 接下来就是防止用户跳过登录页面通过其他方法(如在地址栏直接输出地址进入页面)  的防FQ操作:

这个方法的操作我放在之前曾经说过得控制器最先执行的run方法中执行,每次进到一个页面之前都会进行检查该用户是否合法登录,如果不是合法登录我们将会让他跳转到登录页面

angular.module.run(['$rootScope','$state',function($rootScope,$state){
  $rootScope.$on('$stateChangeStart',function(event,toState){
   // 防止FQ
   if(!(sessionStorage.getItem("token")))$state.go('register');
  });
 }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
node中使用shell脚本的方法步骤
Mar 23 Javascript
node文字生成图片的示例代码
Oct 26 #Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 #Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 #Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 #Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 #Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 #Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 #Javascript
You might like
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP goto语句用法实例
2019/08/06 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
js实现分页功能
2017/05/24 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
详解django.contirb.auth-认证
2018/07/16 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
应届毕业生就业自荐信
2013/10/26 职场文书
领导班子四风表现材料
2014/08/23 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
法定授权委托证明书
2014/09/27 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
实习工作表现评语
2014/12/31 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书