概要说明

在开发的过程中,我们需要通过AJAX请求,访问后台获取数据,这个获取数据的时候,当然需要后台需要时登录状态才能访问数据,当没有登录的情况,这个时候我们需要跳转到登录界面进行登录。

如果每次请求都要做如下处理,我们程序逻辑将无比混乱,ajax 可以为我们解决这个问题。

具体实现思路是:

1.发送ajax 请求访问后端数据。

2.后端如果发现没有登录,那么将会丢出一个exceptionaction 的http 响应头。

3.这个判断将在ajax 拦截中处理,只要有这个响应头,我们会检查是否有登录token,如果没有就会去到登录界面,如果有则尝试使用token自动登录。

这个过程将在拦截中完成。

这个好处是 客户只需要关注业务代码的编写,登录处理放到拦截中处理,而且所有的请求将都会被拦截。

实现代码

const axiosInstance = axios.create({
timeout: 20000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
});
axios 是我们访问后台的JS框架。
定义拦截处理。
function interceptAjax(res){
var tmp = res.headers["exceptionaction"]; if(!tmp) return res;
//系统已经登录。
var token = RxUtil.getCache("token");
if(!token) {
router.push({
name: "login"
});
return;
}

使用拦截器。

axiosInstance.interceptors.response.use(res=>interceptAjax(res));

这样每次访问都会经过拦截器,这也给我们一些思路,一些需要统一验证的的访问,可以通过拦截器进行处理。

vue 开发系列(二) vue ajax 拦截的更多相关文章

  1. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  2. vue 开发系列(九) VUE 动态组件的应用

    业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现. 较常规的方法是使用v-if 来实现, ...

  3. vue 开发系列(一) vue 开发环境搭建

    概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...

  4. WordPress版微信小程序开发系列(二):安装使用问答

    自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...

  5. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

  6. vue开发环境及vue相关

    一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js. 二.安装cnpm cnpm是淘宝对npm的镜 ...

  7. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  8. Java开发学习(二十八)----拦截器(Interceptor)详细解析

    一.拦截器概念 讲解拦截器的概念之前,我们先看一张图: (1)浏览器发送一个请求会先到Tomcat的web服务器 (2)Tomcat服务器接收到请求以后,会去判断请求的是静态资源还是动态资源 (3)如 ...

  9. Windows下USB磁盘开发系列二:枚举系统中所有USB设备

    上篇 <Windows下USB磁盘开发系列一:枚举系统中U盘的盘符>介绍了很简单的获取系统U盘盘符的办法,现在介绍下如何枚举系统中所有USB设备(不光是U盘). 主要调用的API如下: 1 ...

随机推荐

  1. unity农场模拟经营游戏源码

    下载地址: https://item.taobao.com/item.htm?spm=a1z10.5-c-s.w4002-12305352547.10.25ca3c4eWAibvf&id=56 ...

  2. Reportviewer中的函数使用——打印当前日期并格式化

    如2017-10-23 12:20:20 通过DateTime.Now.ToString("yyMMddHHmmss")变为 20171023122020字符串

  3. jQuery禁止Ajax请求缓存

    一 现象 get请求在有些浏览器中会缓存.浏览器不会发送请求,而是使用上次请求获取到的结果. post请求不会缓存.每次都会发送请求. 二 解决 jQuery提供了禁止Ajax请求缓存的方法: $.a ...

  4. synchronized细节问题(一)

    synchronized锁重入: 关键字synchronized拥有锁重入的功能,也就是在使用synchronized时,当一个线程得到一个对象的锁后,再次请求此对象时是可以再次得到该对象的锁. 下面 ...

  5. Mybatis 表名是变量时

    写语句时这样就可以了 <select id="selectTotal" resultType="java.util.Map" parameterType= ...

  6. 博客(二)注册页面django

    首先上一个html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. 775. Global and Local Inversions局部取反和全局取反

    [抄题]: We have some permutation A of [0, 1, ..., N - 1], where N is the length of A. The number of (g ...

  8. C++ 计算直线的交点数(动态规划)

    问题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1466 Problem Description 平面上有n条直线,且无三线共点,问这些直线能有多少种不同 ...

  9. SSKeychain

    SSKeyChains对苹果安全框架API进行了简单封装,支持对存储在钥匙串中密码.账户进行访问,包括读取.删除和设置.SSKeyChain的作者是大名鼎鼎的SSToolkit的作者samsoffes ...

  10. Nginx 做代理服务器时浏览器加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH 的解决方案

    此文章仅作为本人的笔记,文章转载自  http://blog.csdn.net/defonds/article/details/46042809 Nginx 做反向代理,后端是 tomcat,chro ...