问题:本人使用Ruoyi框架表单构建器自动生成的Vue表单文件,使用el-upload的自动上传或者this.$refs['upload'].submit()函数都报错认证失败'未能读取到有效Token',无法访问系统资源

了解本框架的或多或少了解其axios请求统一抽取到utils/require.js中,其中请求拦截器中就设置了token值,而el-upload自动上传文件函数猜测并未携带token,估计问题就出在这!

service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  //此处以下为重点
    //headers中的content-type 默认的大多数情况是  application/json,就是json序列化的格式
    config.headers['Content-Type'] = 'application/json'
    //为了判断是否为formdata格式,增加了一个变量为type,如果type存在,而且是form的话,则代表是formData的格式
    if (config.type && config.type === 'form') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
      //data是接收的数据,接收的数据需要通过qs编码才可以直接使用
      if (config.data) {
        config.data = qs.stringify(config.data)
      }
    }
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
    const requestObj = {
      url: config.url,
      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
      time: new Date().getTime()
    }
    const sessionObj = cache.session.getJSON('sessionObj')
    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
      cache.session.setJSON('sessionObj', requestObj)
    } else {
      const s_url = sessionObj.url;                  // 请求地址
      const s_data = sessionObj.data;                // 请求数据
      const s_time = sessionObj.time;                // 请求时间
      const interval = 1000;                         // 间隔时间(ms),小于此时间视为重复提交
      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
        const message = '数据正在处理,请勿重复提交';
        console.warn(`[${s_url}]: ` + message)
        return Promise.reject(new Error(message))
      } else {
        cache.session.setJSON('sessionObj', requestObj)
      }
    }
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

 

Logo

快速构建 Web 应用程序

更多推荐