问题描述

    在项目中通常会遇到文件下载，一般只需要通过a标签直接请求url地址，浏览器会自动下载文件，但在前后分离项目中需要判断权限，使用a标签请求url不能传递token，导致所有用户都可以下载。

解决方法

1、前端导出

    通过get或post请求返回json数据，然后前端生成excel等文件。

    优点：前端可以灵活的处理需要导出的数据。

    不足：当json数据过大的时候回服务器报错，只能用于数据量较小的时候。

2、后端导出

    前端通过post或get方法请求，后端返回二进制文件，前端通过 blob 数据格式接收，不需要担心数据过大，具体例子如下：

/*
 * axios 封装
 * */

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


let baseURL = '/api'

const exportServer = axios.create({
  baseURL: baseURL, // api的base_url
  timeout: 1000*60*60*24,                  // 请求超时时间
})

// request拦截器
exportServer.interceptors.request.use(
	config => {
		if( getToken()){
			config.headers['Authorization'] = getToken(); //为每个请求带上token
		}
		config.responseType = 'blob'
		return config;
	},

	error => {
		console.log(error) // for debug
  		Promise.reject(error)
	}
)


// respone拦截器
exportServer.interceptors.response.use(
	response => {
		    //返回数据
	    let date = new Date();
            let filefix = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            let blob = new Blob([response.data]); //创建一个blob对象
            let a = document.createElement('a'); //创建一个<a></a>标签
            a.href = URL.createObjectURL(blob); // response is a blob
            a.download = filefix + "下载文件.xlsx";  //文件名称
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            a.remove();

            return response;
	},
	error => {
		console.log('err' + error)// for debug
		if(error.response && error.response.status==401){
			removeToken();
			router.push({ path: "/"})
		}else{
		}

                Message({
                  message: error.message,
                  type: 'error',
                  showClose: true,
                  duration: 3 * 1000
                });
                return Promise.reject(error);

	}
)



export default exportServer