详解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 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
node中使用shell脚本的方法步骤
Mar 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
django中的ajax组件教程详解
2018/10/18 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
BootStrap selectpicker
2016/06/20 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
python导入时小括号大作用
2017/01/10 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python中Apriori算法实现讲解
2017/12/10 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
单位消防安全制度
2014/01/12 职场文书
大学生实习感言
2014/01/16 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
西安导游词
2015/02/12 职场文书
大学生毕业个人总结
2015/02/15 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python