封装$http、做权限时拦截403等状态及获取验证码倒计时:

  1. 拦截接口返回状态

    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为返回状态码
  2. 封装$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
    })
  3. 修改跨域问题
    app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.withCredentials = true;
    }]);
  4. 获取验证码倒计时
    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等状态及获取验证码倒计时、跨域问题解决的更多相关文章

  1. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  2. web项目中的跨域问题解决方法

    一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...

  3. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十二):解决跨域问题

    什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. ...

  4. iOS项目中获取验证码倒计时及闪烁问题解决方案

    -(void)startTime{ __block int timeout= 59; //倒计时时间 dispatch_queue_t queue = dispatch_get_global_queu ...

  5. vue中axios访问Java后端跨域问题解决

    问题背景: 前后端分离,前端选用Vue,后端选用Java,vue编译出的静态页面采用ngix发布,在前端访问后端时出现跨域问题. 解决方法: 跨域的问题解决方法有好多种,这里是通过服务端解决,以下是代 ...

  6. tp中session用来做权限方法 (缓解mysql压力)

    http://www.thinkphp.cn/code/2617.html

  7. angular中使用canvas画布做验证码

    //填充画布,五位随机数 drawNumber(): void { this.clearCanvas(); let ctx: CanvasRenderingContext2D = this.myGra ...

  8. Android中注册获取验证码倒计时按钮

    public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...

  9. 用angular中的ng-repeat和ng-show来实现tab选项卡

    虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id=&q ...

随机推荐

  1. 柳叶刀重磅出击!全外显子测序在胎儿结构异常的评估Whole-exome sequencing in the evaluation of fetal structural anomalies: a prospective cohort study

    柳叶刀发表的文献解读:Whole-exome sequencing in the evaluation of fetal structural anomalies: a prospective coh ...

  2. CMDB服务器管理系统【s5day91】:资产采集相关问题

    资产采集唯一标识和允许临时修改主机名 class AgentClient(BaseClient): def exec(self): obj = PluginManager() server_dict ...

  3. 重置sqlserver自增长列的种子

    重置sqlserver自增长列的种子 转自:http://hi.baidu.com/zbphot/item/41c55982c2d02dd05e0ec184 如果表中的数据不要了,用下面的语句:  t ...

  4. 五道java小题,补更四道java小题

    一:分析以下需求,并用代码实现     1.定义List集合,存入多个字符串     2.删除集合中字符串"def"     3.然后利用迭代器遍历集合元素并输出 import j ...

  5. 数据结构Java实现03----栈:顺序栈和链式堆栈

    一.堆栈的基本概念: 堆栈(也简称作栈)是一种特殊的线性表,堆栈的数据元素以及数据元素间的逻辑关系和线性表完全相同,其差别是线性表允许在任意位置进行插入和删除操作,而堆栈只允许在固定一端进行插入和删除 ...

  6. [物理学与PDEs]第1章习题15 媒介中电磁场的电磁动量密度向量与电磁动量流密度张量

    对媒质中的电磁场, 推导其电磁动量密度向量及电磁动量流密度张量的表达式 (7. 47) 及 (7. 48). 解答: 由 $$\beex \bea \cfrac{\rd}{\rd t}\int_\Om ...

  7. linux内存 free命令 buffer cache作用

    free命令用于查看linux内存使用情况 #free shared:用于进程之间相互共享数据. Used:已使用内存. total:内存总量. free:未使用的内存. available:开启一个 ...

  8. Studio 5000指令IN_OUT管脚实现西门子风格

    习惯了西门子博途编辑风格的同学,乍一看到Studio 5000的编辑界面,一时不适应,尤其是功能块或指令的IN和OUT管脚在一起,不好分辨,本文简单几步搞定,实现像西门子IN和OUT分左右显示风格. ...

  9. js限制字符串长度,超出的部分补...

    value?(value.length>12?(value.substring(0,12))+"...":value):""

  10. [Kubernetes]深入解析Pod对象

    k8s集群搭建是比较容易的,但是我们为什么要搭建,里面涉及到的内容,我们为什么需要? 这篇文章就尝试来讲讲,我们为什么需要一个Pod,对Pod对象来一个深入解析. 我们为什么需要Pod 我们先来谈一个 ...