AngularJS interceptors

最新推荐文章于 2024-08-22 08:52:31 发布

转载最新推荐文章于 2024-08-22 08:52:31 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/geek4j/blog/593652

文章标签：

#前端 #javascript #后端 #ViewUI

本文探讨了在使用AngularJS构建的管理系统中实现登录超时验证的方法，特别是如何通过HTTP拦截器优雅地处理登录状态变化，确保用户体验与安全性并重。重点介绍了在jQuery和AngularJS环境下，如何在请求响应中加入自定义逻辑来检测和处理登录超时情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

最近在做一个管理系统，使用AngularJS，一直在关注一个Point：如果进行登录超时验证，因为采用前后端分离（通过异步交互），所以即使登录超时也只能返回登录页面，无法像传统MVC一样转发到登录页面，开始的想法是捕捉前端的document的点击事件，先进行一个简单的异步请求，验证后再进行实际的点击事件，但是感觉不太正规，当然有人说在请求的回调中可以处理，但是一个站点有N个请求，这个实在让人头疼，后来在一些资料中了解到，可以在jquery.js中修改源码，在请求响应中做处理，这样可以做到通用，个人认为可取，但是AngularJS提供更加优雅的方法，就是$http#interceptors

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config;
    },

    // optional method
   'requestError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise      }
      return $q.reject(rejection);
    },



    // optional method
    'response': function(response) {
      // do something on success
      return response;
    },

    // optional method
   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise      }
      return $q.reject(rejection);
    }
  };
});
$httpProvider.interceptors.push('myHttpInterceptor');
// alternatively, register the interceptor via an anonymous factory
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
  return {
   'request': function(config) {
       // same as above
    },

    'response': function(response) {
       // same as above
    }
  };
});

转载于:https://my.oschina.net/geek4j/blog/593652