关闭

vue2项目,前端写请求拦截器和响应式拦截器

标签: sessionvue2html5数据vuex
482人阅读 评论(1) 收藏 举报
分类:

很可能进了个假互联网公司,遇到堆假后台尴尬,拦截器沦落到前端写。。。这个拦截器,我们需要写在fetch文件下的api.js里,包括axios的封装,也在这个js文件里面写,如下:

import axios from 'axios'
import vue from 'vue'
import store from './../store/index'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.baseURL = '后台接口'
// 是否首次请求数据
let storeSession = false
// 是否进行一次登录状态的判断
let token = false
let GET_MYLOTTERY_NUM = 0
let header
// 请求拦截器
axios.interceptors.request.use(function(config) {
  // 请求数据之前判断是否首次请求 如果是添加session 如果不是跳过
  header = JSON.parse(config.data.split('=')[1]).head
  if (header.SESSION_ID == '' || header.SESSION_ID == null) {
    storeSession = true
  }
  return config
}, function(error) {
  return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
  if (!parseInt(response.data.head.CODE)) {
    // 判断是否为第一次登陆,如果是在第一次请求的时候在vuex中添加 SESSION_ID
    if (storeSession) {
      store.dispatch('SESSION_ID', response.data.head.SESSION_ID)
      storeSession = false
    }
    // 判断是否是登录请求,如果是登录请求
    // 判断登录状态
    if (store.state.common.token != '' && store.state.common.token != null) {
      GET_MYLOTTERY_NUM++
      if (GET_MYLOTTERY_NUM <= 1) {
        token = true
      }
    } else {
      //  未登录状态,并进入登录页面登录
      if (header.TYPE == 'LOGIN') {
        token = true
      }
    }
    return response
  } else {
    alert(response.data.head.MSG)
  }
}, function(error) {
  return Promise.reject(error)
})
// 封装axiospost请求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
export default {
  // 组件中公共页面请求函数
  commonApi(url, params) {
    return fetch(url, params)
  }
}

这样就完成了拦截器……

0
0
查看评论

借助ajaxPrefilter ajax预处理函数实现ajax拦截器

最近在用requireJS+jquery重构PC官网,原来的代码太冗余,很多方法和变量都重复定义,也没有全局配置的地方。习惯了模块化开发和全局配置的我简直不能忍。 原来的代码每次发ajax请求都需要手动序列化JS对象,添加时间戳/token,觉得太麻烦。于是想实现一个ajax的拦截器,能够自动帮我们...
  • cjd6568358
  • cjd6568358
  • 2017-05-27 16:12
  • 791

基于ExtJs的JavaScript拦截器

Java后台有拦截器的功能,但是Js前台是没有这个概念的,最近做项目需要对前台返回的信息做统一的处理,于是就想到了能不能在前台也做一个类似与拦截器的功能,对后台返回的消息做统一的处理,然后用了半天的时间完成了这个功能,现在奉上代码。 Java消息类,统一向处理向前台返回的消息 package c...
  • jaune161
  • jaune161
  • 2014-01-11 11:56
  • 6802

j2ee的web项目的定时器,不用受到拦截器的拦截,因为根本不是http url请求

j2ee的web项目的定时器,不用受到拦截器的拦截,因为根本不是http url请求 关于定时器原理,参考my: http://blog.csdn.net/ideality_hunter/article/details/78707563
  • Ideality_hunter
  • Ideality_hunter
  • 2017-12-04 11:37
  • 63

java web 拦截器与过滤器区别

什么是拦截器(Interceptor )?          拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作。拦截是AOP的一种实现策略。 ...
  • u014655465
  • u014655465
  • 2015-07-10 09:41
  • 2528

web.xml 加入中心拦截器

1、拦截器是基于java的反射机制的,而过滤器是基于函数回调  2、过滤器依赖与servlet容器,而拦截器不依赖与servlet容器  3、拦截器只能对action请求起作用,而过滤器则可以对几乎所有的请求起作用  4、拦截器可以访问action上下文、值栈里的...
  • u013551536
  • u013551536
  • 2016-01-31 18:00
  • 3402

$.ajax 请求 拦截器 重定向 无效 解决办法

在ajax 异步请求下 拦截器过滤器中使用 重定向 页面响应无效我这里用的是springboot框架,用拦截器实现 对请求的拦截 ,session超时直接跳转到login.html页面。后台代码:@Override public void addInterceptors(Intercepto...
  • Sunny__wei
  • Sunny__wei
  • 2017-12-26 16:28
  • 219

springmvc拦截器的使用(分页)

1.首先在spring-mvc.xml文件配置拦截器。 <!-- 拦截器 --> mvc:interceptors> mvc:interceptor> mvc:mapping path="/autotest/**"/> ...
  • meleto
  • meleto
  • 2018-01-12 09:37
  • 40

后台拦截器的编写

写商城项目的时候遇到一个后台管理,为了防止权限不够的人登录后台,写了一个拦截器。 重点内容 public class PrivilegeInterceptor extends MethodFilterInterceptor{ @Override protected String d...
  • wanglei1002
  • wanglei1002
  • 2016-09-17 10:15
  • 521

自定义拦截器GET请求POST请求

 public class LoggingInterceptor implements Interceptor {   @Override public Response intercept(Chain chain) throws IOException {  ...
  • Developer_Sir
  • Developer_Sir
  • 2017-11-22 19:12
  • 67

拦截器的编写总结

总结如何编写一个全局拦截登录信息的拦截器: Demo中包括2个xml.一个struts.xml.一个user.xml; 在struts.xml中使用include标签引入user.xml;(便于模块化开发) 在struts.xml中创建package:    //配...
  • qq_27984023
  • qq_27984023
  • 2016-11-19 18:55
  • 203
    个人资料
    • 访问:84968次
    • 积分:1120
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:1篇
    • 译文:0篇
    • 评论:40条
    文章分类
    最新评论