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 相关文章推荐
Javascript select下拉框操作常用方法
Nov 09 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
深入解析ES6中的promise
Nov 08 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使用google地图应用实例
2014/12/31 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python实现一个论文下载器的过程
2021/01/18 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
好邻里事迹材料
2014/01/16 职场文书
家长给小学生的评语
2014/01/30 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
党员承诺践诺书
2014/05/20 职场文书
档案工作汇报材料
2014/08/21 职场文书
工资收入证明
2014/10/07 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python