Element-admin脚手架 用不了post 请求解决方案(暂时性)

在这里插入图片描述request.js 1

import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'
import qs from 'qs'

const request = axios.create({
  timeout: 2000
  // baseURL:
  // Headers:
})

function getBaseURL (url) {
  if (url.startsWith('/boss')) {
    return 'http://eduboss.lagou.com'
  } else {
    return 'http://edufront.lagou.com'
  }
}
// 请求拦截器
request.interceptors.request.use(config => {
  // 判断 config.url 的前缀,来进行请求 baseURL 的设置
  config.baseURL = getBaseURL(config.url)

  // 统一设置Token 信息
  const { user } = store.state
  if (user && user.access_token) {
    config.headers.Authorization = user.access_token
  }
  return config
})

// 响应拦截器
request.interceptors.response.use(response => {
  // 状态码 2xx 会响应这里
  // console.log('响应成功了', response)
  return response
}, (error) => {
  if (error.response) {
    // 请求发送成功,响应接收完毕,但状态码为失败的原因
    // console.log(error.response.data)
    // console.log(error.response.status)
    // console.log(error.response.headers)
    // 1、判断失败的状态码情况(主要处理 401 的情况)
    const { status } = error.response
    let errorMessage = ''
    if (status === 400) {
      errorMessage = '请求参数错误'
    } else if (status === 401) {
      // Token过期
      // errorMessage = 'Token过期'
      // 1、没有Token信息(无登录)
      if (!store.state.user) {
        // 跳转登录页面
        router.push({
          name: 'login',
          query: {
            // currentRoute就是存储了路由信息的对象
            redirect: router.currentRoute.fullPath
          }
        })
        return Promise.reject(error)
      }
      // 检查是否正在刷新 token
      let isRefreshing = false
      // 2、 Token  无效 (错误的Token、Token过期)
      // 发送请求,获取新的access_token

      if (isRefreshing) {
        return
      }
      // 开始刷新状态
      isRefreshing = true

      return request({
        method: 'POST',
        url: '/front/user/refresh_token',
        data: qs.stringify({
          refreshtoken: store.state.user.refresh_token
        })
      }).then(res => {
        // 刷新成功后
        // 存储新的token
        store.commit('setUser', res.data.content)
        // 重新发送失败的请求
        // error.config是本次失败请求的配置对象
        return request(error.config)
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        // 响应处理完毕,结束刷新状态
        isRefreshing = false
      }
      )
    } else if (status === 403) {
      errorMessage = '没有权限,请联系管理员'
    } else if (status === 404) {
      errorMessage = '请求资源不存在'
    } else if (status === 500) {
      errorMessage = '服务器错误,请联系管理员'
    }
    // console.log(errorMessage)
    Message.error(errorMessage)
  } else if (error.request) {
    // 请求发送成功,但没有收到响应
    // The request was made but no response was received
    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
    // http.ClientRequest in node.js
    Message.error(error.request)
  } else {
    // 意料之外的错误
    // Something happened in setting up the request that triggered an Error
    Message.error(error.message)
  }
  // 将本次请求的错误对象继续向后抛出,让接收响应的处理函数进行操作
  return Promise.reject(error.response.data)
})

export default request

request.js 2

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // console.log(res.code)
    // console.log(res.msg)
    if (res.code === 200 || res.code === 300) {
      return res
    }

    // 系统报错报500
    if (res.code === 500) {
      return Promise.reject(res)
    }

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虚构的乌托邦

如果可以请打赏鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值