vue ajax 拦截原理与实现方法示例

本文实例讲述了vue ajax 拦截原理与实现方法。分享给大家供大家参考，具体如下：

概要说明

在开发的过程中，我们需要通过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.js程序设计有所帮助。

赞 (0)

相关推荐

  • vue使用Axios做ajax请求详解

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

  • vue.js 表格分页ajax 异步加载数据

    Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f

  • Vue-resource实现ajax请求和跨域请求示例

    vue-resource是Vue提供的体格http请求插件,如同jQuery里的$.ajax,用来和后端交互数据的. 在使用时,首先需要安装vue-resource插件 1.在项目跟目录上安装: npm install vue-resource 2.引入resource插件 import VueResource from 'vue-resource'; Vue.use(VueResource) 3.发送请求: this.$http.get("http://www.vrserver.applinz

  • Vue form 表单提交+ajax异步请求+分页效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-

  • 浅谈Vue.js应用的四种AJAX请求数据模式

    如果您闲的没事干去两个Vue.js开发人员:"在Vue应用中使用AJAX的正确姿势是咋样的?",您将会得到三种或更多的不同回答. Vue.js官方没有提供实现AJAX的指定方式,并且有许多不同的设计模式可以被有效地使用.每个都有自己的利弊,应根据要求进行判断.你甚至可以同时使用几个! 在本文中,我将向您展示您可以在Vue应用程序中实现AJAX的四个位置: 1.根实例 2.组件Components 3.Vuex actions 4.路线导航卫士 5.另加:奖金模式 我将解释每个方法,举一

  • vue使用ajax获取后台数据进行显示的示例

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"&g

  • 详解vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

  • Vue.js展示AJAX数据简单示例讲解

    最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

  • 详解vue与后端数据交互(ajax)：vue-resource

    详解vue与后端数据交互(ajax)：vue-resource

    本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定

    详解Vue.js基于$.ajax获取数据并与组件的data绑定

    Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <

  • Vue.js Ajax动态参数与列表显示实现方法

    Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&

随机推荐