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

$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‘);
}]);

拦截器允许你:

  • 通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 $http 调用失败。
  • 通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致 $http 调用失败。
  • 通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。
  • 通过实现 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);
时间: 2024-08-16 00:57:32

AngularJs HTTP响应拦截器实现登陆、权限校验的相关文章

Struts2自己定义拦截器实例—登陆权限验证

版本号:struts2.1.6 此实例实现功能:用户须要指定username登陆,登陆成功进入对应页面运行操作,否则返回到登陆页面进行登陆,当直接訪问操作页面(登陆后才干訪问的页面)时则不同意,须返回登陆页面. 代码例如以下: 一.页面 login.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUB

SpringMVC 登陆拦截器实现登陆控制

思路,先登陆后,将登陆信息存储在session中,然后通过拦截器,对系统中的页面和资源进行访问拦截,同时对于登陆本身相关的页面和资源不拦截. 实现方法: /**  * 登陆拦截器.  *  * @author leizhimin 2014/6/26 16:08  */ public class LoginInterceptor extends HandlerInterceptorAdapter {     private static final String[] IGNORE_URI = {"

vue axios请求/响应拦截器

// main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 Vue.prototype.$axios = Axios // 引用mint-ui import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI) // 一次性注册多个

struts2综合例子--------拦截器(登陆检查,日志记录),校验validate,

列表Action package he.action; import he.dao.UserDAO; import java.sql.SQLException; import java.util.LinkedList; import java.util.List; public class ListAction { private List<User> users = new LinkedList<User>(); public List<User> getUsers(

vue配置请求拦截器和响应拦截器

首先确保我们已经设置的store.js进行值的存取,这时候我们需要配置请求和响应的拦截器设置 main.js import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import axios from 'axios' // 引入store i

springmvc拦截器实现登陆认证

博客以Demo的形式讲诉拦截器的使用 项目结构如图: 需要的jar:有springMVC配置需要的jar和jstl需要的jar SpringMVC包的作用说明: aopalliance.jar:这个包是AOP联盟的API包,里面包含了针对面向切面的接口.通常spring等其它具备动态织入功能的框架依赖这个jar spring-core.jar:这个jar 文件包含Spring 框架基本的核心工具类.Spring 其它组件要都要使用到这个包里的类,是其它组件的基本核心 ,当然你也可以在自己的应用系

Jsp的filter拦截器实现用户权限分级

看了一下上学期学的项目,发现用到了jsp的filter来实现不同用户登录网站访问模块的分类,现在把代码分享出来跟大家共享一下··· package com.wws.filter; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import javax.servlet.Filter; import javax.

后台权限校验拦截器

拦截器类 /* * 后台权限校验的拦截器 * *对没有登陆的用户,不可以进行访问 */ public class PrivilegeInterceptor extends MethodFilterInterceptor { @Override //执行拦截的方法 protected String doIntercept(ActionInvocation actionInvocation) throws Exception { //判断session中是否保存了后台用户的信息 AdminUser

AngularJS 拦截器和好棒例子

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