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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
Vuex实现数据增加和删除功能
Nov 11 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Django中使用Celery的教程详解
2018/08/24 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
优秀员工表扬信
2014/01/17 职场文书
市场部规章制度
2014/01/24 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
爱护公物演讲稿
2014/09/09 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
学生会辞职信
2015/03/02 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android