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实现的在新窗口打开链接的方法小结
Apr 22 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
jQuery设计思想
Mar 07 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
html实现随机点名器的示例代码
Apr 02 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数据类型判断函数有哪些
2013/09/23 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
python33 urllib2使用方法细节讲解
2013/12/03 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
解决python "No module named pip" 的问题
2018/10/13 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
如何基于python实现归一化处理
2020/01/20 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
django rest framework使用django-filter用法
2020/07/15 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
保安的辞职报告怎么写
2014/01/20 职场文书
北京大学自荐信范文
2014/01/28 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
陕西导游词
2015/02/04 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
导游词之无锡梅园
2019/11/28 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python