angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决
封装$http、做权限时拦截403等状态及获取验证码倒计时:
- 拦截接口返回状态
var app = angular.module('app'); app.factory('UserInterceptor', ["$q","$rootScope", "$location", function ($q, $rootScope, $location,$localStorage) {
return {
request:function(config){
config.headers["Authorization"] = 'Bearer ' + localStorage['token'];
var urlArray = config.url.split("/")
if(urlArray.indexOf("api") > -1 && config.method == "GET"){
if(config.url.indexOf("?") > -1){
config.url = config.url+"&time="+new Date().getTime();
}else{
config.url = config.url+"?time="+new Date().getTime();
}
}
return config;
},
responseError: function (response) {
switch(response.status)
{
case 401:
localStorage.clear();
$location.path("/login");
break;
case 403:
$location.path("/login");
break;
}
}
};
}]);response.status为返回状态码
- 封装$http
app.factory('ResourceGet',function($http,$q){
var service = {}
service.callBack = function(action,params){
var url = ' http://10.0.10.201:8080/';
var deferred = $q.defer();
$http({
method: 'GET',
url: url+action,
params: params
}).success(function(data){
deferred.resolve(data);
})
return deferred.promise;
}
return service
}); app.factory('ResourcePut', function ($http, $q) {
var service = {}
service.callBack = function ( action, params ) {
var url = 'http://10.0.10.201:8080/'
var deferred = $q.defer()
$http({
method: 'PUT',
url: url + action,
data: params,
headers : {'Content-Type': 'application/json; charset=utf-8'}
}).success(function (data) {
deferred.resolve(data)
})
return deferred.promise
}
return service
}) app.factory('ResourcePost', function ($http, $q) {
var service = {}
service.callBack = function ( action, params ) {
var url = 'http://10.0.10.201:8080/'
var deferred = $q.defer()
$http({
method: 'POST',
url: url + action,
data: params,
headers : {'Content-Type': 'application/json; charset=utf-8'}
}).success(function (data) {
deferred.resolve(data)
})
return deferred.promise
}
return service
}) app.factory('ResourceDelete', function ($http, $q) {
var service = {}
service.callBack = function (action, params) {
var url = 'http://10.0.10.201:8080/'
var deferred = $q.defer()
$http({
method: 'DELETE',
// headers : {'Content-Type': 'application/x-www-form-urlencoded'},
url: url + action
}).success(function (data) {
deferred.resolve(data)
})
return deferred.promise
}
return service
}) - 修改跨域问题
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}]); - 获取验证码倒计时
app.service('WaitSecond',function(){
var wait = 60;
var t = this;
this.waitTime = function(code){
if(wait == 0){
$("#"+code).html('获取验证码');
$("#"+code).removeAttr("disabled");
wait = 60
}else{
console.log(code);
$("#"+code).html(function(){
return wait + '秒'
}).attr('disabled','true');
wait--;
setTimeout(function () {
t.waitTime(code);
}, 1000);
}
}
})html:
<button id="code" ng-click="register.getCode('code')" class="ng-binding">获取验证码</button>controller:
WaitSecond.waitTime(id);
5.统一接口定义全局变量
app.constant('apiImg','http://10.0.10.200:8080/SeeMeInterface/img/uploadImg')
angular中service封装$http做权限时拦截403等状态及获取验证码倒计时、跨域问题解决的更多相关文章
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- web项目中的跨域问题解决方法
一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十二):解决跨域问题
什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. ...
- iOS项目中获取验证码倒计时及闪烁问题解决方案
-(void)startTime{ __block int timeout= 59; //倒计时时间 dispatch_queue_t queue = dispatch_get_global_queu ...
- vue中axios访问Java后端跨域问题解决
问题背景: 前后端分离,前端选用Vue,后端选用Java,vue编译出的静态页面采用ngix发布,在前端访问后端时出现跨域问题. 解决方法: 跨域的问题解决方法有好多种,这里是通过服务端解决,以下是代 ...
- tp中session用来做权限方法 (缓解mysql压力)
http://www.thinkphp.cn/code/2617.html
- angular中使用canvas画布做验证码
//填充画布,五位随机数 drawNumber(): void { this.clearCanvas(); let ctx: CanvasRenderingContext2D = this.myGra ...
- Android中注册获取验证码倒计时按钮
public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...
- 用angular中的ng-repeat和ng-show来实现tab选项卡
虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...
随机推荐
- Day041--CSS, 盒模型, 浮动
内容回顾 表单标签 input type text 普通的文本 password 密码 radio 单选 默认选中添加checked 互斥的效果 给radio标签添加 相同的name checkbo ...
- openCV 3.0 Ubuntu下编译问题
1.有个ipptv啥的东西下布下来,去官网下载放到相应目录 2.把编译器降级到5版本才能编译
- 3.24网络攻防选拔题部分write up
20175221 3.24网络攻防选拔题部分write up Q1:百度一下,你就知道 解压题目得到一个文件夹和一个网址 打开文件夹,有三张图片 用winhex和stegsolve查看三张图片,没有 ...
- 寒冬之下,移动开发没人要了? 浅谈 iOS 开发者该 何去何从?
前言: 作者 | 梅梅 文章来源 CSDN 对于移动互联网而言,2018 年像是球场上的一声裁判哨.哨声响起,高潮迭起的上半场结束.本该再创辉煌的下半场,还没开赛却被告之:规则改变.场地收缩.教 ...
- jq常用操作
1. 将滚动条置于底部 var srcH = $(".msg-IOC").prop("scrollHeight");$('.msg-IOC').scrollTo ...
- require.js使用教程
require.js使用教程 下载require.js, 并引入 官网: http://www.requirejs.cn/ github : https://github.com/requirejs/ ...
- 2017-12-19python全栈9期第四天第二节之列表的增删查改之按切片删除
#!/user/bin/python# -*- coding:utf-8 -*-li = ['zs','ls','ww','zl','xx']# del li[1:] #1到最后# print(li) ...
- 主机管理+堡垒机系统开发:strace工具的实现原理(七)
strace是Linux系统下的一个用来跟踪系统调用的工具,它的实现基础是ptrace系统调用.使用strace工具可以跟踪一个程序执行过程中发生的系统调用. 我这里讲到的内容有一点点和mips体系相 ...
- day18 集合框架(JCF)
集合框架(JCF)java collections framework 框架:为了实现某一目的/功能而预先提供的一系列封装好的具有继承或实现关系的类与接口. 1.这种框架是高性能的,对基本类集(动态数 ...
- 滚动锚定(Scroll Anchoring)- 让视口内容不再因视口上方 DOM 元素的高度变化而产生跳动
不知道你有没有经历过这样的场景:当你打开一张“多图杀猫”的页面后,正一张图一张图边滚边看,在你刚准备定睛看某一张图的时候,这张图突然被它上面的内容挤到了视口下方,然后你赶紧把滚动条往下拉,试图追赶这张 ...