关闭

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

标签: sessionvue2html5数据vuex
345人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62966次
    • 积分:926
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:1篇
    • 译文:0篇
    • 评论:31条
    文章分类
    最新评论