vue resource设置全局拦截器实例

vue-resource的interceptors拦截器的实例

binginsist

5465人浏览 · 2017-01-25 15:42:59

binginsist · 2017-01-25 15:42:59 发布

去年10月份开始使用vue2.0做各种项目，搭配element-ui组件使用效率蛮高的。在其中的一个项目中因为需要进行登录判定，需要在任何一个页面任何一次http请求，增加对token的判断，如果token已过期或者不存在，需要跳转至登录页面。通过查看官方文档,找到vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后，如果设置了拦截器，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给then进行接收。本文将这个项目如何使用全局拦截器的方法分享下，大家还有什么好的方法可以推荐给我，谢谢。拦截器写在了main.js中，部分代码请见下面（为了保证隐私只留了login和home页面）。

更多笔记可以去我的GitHub查看：https://github.com/binginsist/binginsistNote

//引入组件
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

import store from './store'



//使用组件
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(Element)

//Vue.http.options.emulateJSON = true;
Vue.http.options.crossOrigin = true;
Vue.http.options.emulateHTTP = true;

/******************拦截器设置请参考这部分(开始)******************/
Vue.http.interceptors.push((request, next)  =>{
  //登录成功后将后台返回的TOKEN在本地存下来,每次请求从sessionStorage中拿到存储的TOKEN值
  let TOKEN=sessionStorage.getItem('STORAGE_TOKEN');
  if(TOKEN){
    //如果请求时TOKEN存在,就为每次请求的headers中设置好TOKEN,后台根据headers中的TOKEN判断是否放行
    request.headers.set('TOKEN',TOKEN);
  }
  next((response) => {
    return response;
  });
});
/******************拦截器设置请参考这部分(结束)******************/


import home from './pages/home'
import login from './pages/login'




//创建路由实例,配置路由
const router = new VueRouter({
  //mode: 'history',
  routes: [
    {path: '/', component:login},
    {path: '/home', component:home}
  ]
});


//创建挂载根实例
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^