详解AngularJs HTTP响应拦截器实现登陆、权限校验


Posted in Javascript onApril 11, 2017

$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作。还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它。一个很好例子就是处理全局 http 异常。拦截器(Interceptors)应运而生。本文将介绍 AngularJS 的拦截器,并且给几个有用的例子。

什么是拦截器?

$httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。下面的例子告诉你怎么创建一个拦截器:

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
  $log.debug('$log is here to show you that this is a regular factory with injection');

  var myInterceptor = {
    ....
    ....
    ....
  };

  return myInterceptor;
}]);

然后通过它的名字添加到 $httpProvider.interceptors 数组:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
}]);

拦截器允许你:

  1. 通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 $http 调用失败。
  2. 通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致 $http 调用失败。
  3. 通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。
  4. 通过实现 responseError 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。

angularJs提供四种拦截器,其中两种成功拦截器(request、response),两种失败拦截器(requestError、responseError)。

angular.module("myApp", [])
  .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) {
    var httpInterceptor = {
      'responseError' : function(response) {
        ......
        return $q.reject(response);
      },
      'response' : function(response) {
        ......
        return response;
      },
      'request' : function(config) {
        ......
        return config;
      },
      'requestError' : function(config){
        ......
        return $q.reject(config);
      }
    }
    return httpInterceptor;
  }

因此,我们可以通过拦截器来判断用于的登陆与权限问题。

代码中的 $rootScope.user是登录后把用户信息放到了全局rootScope上,方便其他地方使用,$rootScope.defaultPage也是默认主页面,初始化的时候写死到rootScope里的。

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
 if(toState.name=='login')return;// 如果是进入登录界面则允许
 // 如果用户不存在
 if(!$rootScope.user || !$rootScope.user.token){
 event.preventDefault();// 取消默认跳转行为
 $state.go("login",{from:fromState.name,w:'notLogin'});//跳转到登录界面
 }
});

另外还有用户已经登录,但是登录超时了,还有就是增加后台接口的判断来增强安全性。不能完全依靠本地逻辑

我们在model里面增加一个用户拦截器,在rensponseError中判断错误码,抛出事件让Contoller或view来处理

app.factory('UserInterceptor', ["$q","$rootScope",function ($q,$rootScope) {
 return {
    request:function(config){
      config.headers["TOKEN"] = $rootScope.user.token;
      return config;
    },
    responseError: function (response) {
      var data = response.data;
  // 判断错误码,如果是未登录
      if(data["errorCode"] == "500999"){
  // 清空用户本地token存储的信息,如果
        $rootScope.user = {token:""};
  // 全局事件,方便其他view获取该事件,并给以相应的提示或处理
        $rootScope.$emit("userIntercepted","notLogin",response);
      }
  // 如果是登录超时
  if(data["errorCode"] == "500998"){
        $rootScope.$emit("userIntercepted","sessionOut",response);
      }
      return $q.reject(response);
    }
  };
}]);

别忘了要注册拦截器到angularjs的config中哦

app.config(function ($httpProvider) {
  $httpProvider.interceptors.push('UserInterceptor');
});

最后在controller中处理错误事件

$rootScope.$on('userIntercepted',function(errorType){
  // 跳转到登录界面,这里我记录了一个from,这样可以在登录后自动跳转到未登录之前的那个界面
  $state.go("login",{from:$state.current.name,w:errorType});
});

最后还可以在loginController中做更多的细节处理

// 如果用户已经登录了,则立即跳转到一个默认主页上去,无需再登录
if($rootScope.user.token){
  $state.go($rootScope.defaultPage);
  return;
}

另外在登录成功回调后还可以跳转到上一次界面,也就是上面记录的from

var from = $stateParams["from"];
$state.go(from && from != "login" ? from : $rootScope.defaultPage);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
jquery禁用右键示例
Apr 28 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 #Javascript
js 获取今天以及过去日期
Apr 11 #Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 #Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 #Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 #Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 #Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 #Javascript
You might like
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
js文字横向滚动特效
2015/11/11 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
python实现保存网页到本地示例
2014/03/16 Python
Python isinstance函数介绍
2015/04/14 Python
python删除列表内容
2015/08/04 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
家长写给孩子的评语
2014/04/18 职场文书
大跃进口号
2014/06/16 职场文书
工作年限证明模板
2014/11/01 职场文书
迎新生欢迎词
2015/01/23 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
校长新学期寄语2016
2015/12/04 职场文书
商业计划书格式、范文
2019/03/21 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技