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 相关文章推荐
js类型检查实现代码
Oct 29 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
node.js 动态执行脚本
Jun 02 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
深入理解Node module模块
Mar 26 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
JS实现简单九宫格抽奖
Jun 28 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实现paypal整合方法
2010/11/28 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
Angularjs的启动过程分析
2017/07/18 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python中除法使用的注意事项
2014/08/21 Python
python网络编程实例简析
2014/09/26 Python
python类的继承实例详解
2017/03/30 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
后勤岗位职责
2013/11/26 职场文书
书香校园活动方案
2014/02/28 职场文书
大型公益活动策划方案
2014/08/20 职场文书
改革共识倡议书
2014/08/29 职场文书