angular 用拦截器统一处理http请求和响应 比如加token
想使用angularjs里的htpp向后台发送请求,现在有个用户唯一识别的token想要放到headers里面去,也就是{headres:{'token':1}}
index.html里引入以下js:
angular.module('app.factorys',[])
.factory('httpInterceptor',['$q','$injector','$localStorage',function ($q,$injector,$localStorage) {
var httpInterceptor = {
'responseError' : function(response) {
// ......
return $q.reject(response);
},
'response' : function(response) {
if (response.status == ) {
// console.log('do something...');
}
return response || $q.when(response);
},
'request' : function(config) {
config.headers = config.headers || {};
if ($localStorage.token) {
config.headers.token = $localStorage.token;
// config.headers['X-Access-Token'] = $localStorage.token;
}; return config || $q.when(config); return config;
},
'requestError' : function(config){
// ......
return $q.reject(config);
}
};
return httpInterceptor;
}])
在app里注入factory后,在config里面配置
.config(['$httpProvider',function(){
$httpProvider.interceptors.push(httpInterceptor);
}])
如果你的代码并未做拆分,可以直接在config里面写拦截器
$httpProvider.interceptors.push(['$q','$injector','$localStorage',function ($q,$injector,$localStorage) {
var httpInterceptor = {
'responseError' : function(response) {
// todo...
return $q.reject(response);
},
'response' : function(response) {
if (response.status == ) {
// console.log('do something...');
}
return response || $q.when(response);
},
'request' : function(config) {
config.headers = config.headers || {};
if ($localStorage.token) {
config.headers.ut = $localStorage.token; //把你登录接口返回给你的token存到$localStorage里面,在这里取就好了
// config.headers['X-Access-Token'] = $localStorage.token;
}; return config || $q.when(config);
// return config;
},
'requestError' : function(config){
// todo...
return $q.reject(config);
}
};
return httpInterceptor;
}]);
angular 用拦截器统一处理http请求和响应 比如加token的更多相关文章
- ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求
sstep1:新建http-Interceptor.ts文件 import { Injectable } from '@angular/core'; import { HttpInterceptorS ...
- AngularJS 拦截器实现全局$http请求loading效果
日常项目开发中,当前端需要和后端进行数据交互时,为了友好的UI效果,一般都会在前端加个loading的状态提示(包括进度条或者icon显示),数据传输或交互完成之后,再隐藏/删除loading提示. ...
- axios封装,使用拦截器统一处理接口
1.项目路径下,引入axios.qs依赖 npm install axios npm install qs 2.在项目的src路径下新建一个commJs文件夹,在commJs文件夹里新建aps.js和 ...
- Struts2 在登录拦截器中对ajax请求的处理
前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...
- Okhttp拦截器统一异常处理并多次读取response.body().string()
参考:https://blog.csdn.net/a624806998/article/details/73863606 引言: 写这篇文章,因为在自己编写实现Http日志拦截器的时候,在拦截器中使用 ...
- AngularJS 用 Interceptors 来统一处理 HTTP 请求和响应
Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码 ...
- java拦截器与过滤器打印请求url与参数
HttpServletRequest httpServletRequest = (HttpServletRequest) request; HttpServletResponse httpServle ...
- axios 拦截器统一在接口增加时间戳参数,防止走缓存。
request.interceptors.request.use( config => { if (config.method == 'post') { config.data = { ...c ...
- vue 的全局拦截器
使用拦截器 你可以截取请求或响应在被 then 或者 catch 处理之前 mounted:function(){ Vue.http.inserceptors.push(function(resque ...
随机推荐
- 从 Spring Cloud 看一个微服务框架的「五脏六腑」
原文:https://webfe.kujiale.com/spring-could-heart/ Spring Cloud 是一个基于 Spring Boot 实现的微服务框架,它包含了实现微服务架构 ...
- JSON Web Token(JWT)原理和用法介绍
JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.今天给大家介绍一下JWT的原理和用法. 官网地址:https://jwt.io/ 一.跨域身份验证 Internet服务无法与 ...
- [Swift]JSON字符串与字典(Dictionary)、数组(Array)之间的相互转换
1.JSON字符串与字典(Dictionary)之间的相互转换 import Foundation //JSON字符串转换为字典(Dictionary) func getDictionaryFromJ ...
- php--include 、require
一.include .require 定义:包含并运行指定文件 问题:查询了这两个语言结构的资料,有人说,什么require 先执行,什么include后执行. 思考:我觉得官方文档已经解释的很清楚 ...
- JavaScript 快速入门
JavaScript是jquery的基础, JavaScript是一种描述性语言 JavaScript的组成 :ECMAScript,BOM,DOM. JavaScript的基本结构 <scri ...
- Python shuffle() 函数
描述 shuffle() 方法将序列的所有元素随机排序. 语法 以下是 shuffle() 方法的语法: import random random.shuffle (lst ) 注意:shuffle( ...
- 卷积神经网络CNN的原理(一)---基本概念
什么是卷积神经网络呢?这个的确是比较难搞懂的概念,特别是一听到神经网络,大家脑海中第一个就会想到复杂的生物学,让人不寒而栗,那么复杂啊.卷积神经网络是做什么用的呢?它到底是一个什么东东呢? 卷积神经网 ...
- Java 容器 & 泛型:四、Colletions.sort 和 Arrays.sort 的算法
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 本来准备讲 Map集合 ,还是喜欢学到哪里总结吧.最近面试期准备准备,我是一员,成功被阿里在线笔试秒杀 ...
- [NewLife.XCode]数据模型文件
NewLife.XCode是一个有10多年历史的开源数据中间件,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和运行日志来进行深入分析,蕴含 ...
- PYTHON 中 SQL 带参数
使用 PYTHON 的字符串填充方式 import mysql.connector sql = 'select \* from school.student where age > {age} ...