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 相关文章推荐
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
javascript入门教程基础篇
Nov 16 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
详解tween.js的使用教程
Sep 14 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
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中fgetcsv()函数用法实例
2014/11/28 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python监控nginx端口和进程状态
2019/09/06 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
2014年最新学校运动会广播稿
2014/09/17 职场文书
节水倡议书
2015/01/19 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Nebula Graph解决风控业务实践
2022/03/31 MySQL