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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
采用call方式实现js继承
May 20 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 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 curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
smarty表格换行实例
2014/12/15 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
小学生个人先进事迹材料
2014/05/08 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
调解协议书范本
2016/03/21 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript