Vue中携带请求头(token)的上传与下载

(1)先说上传的,我这里是上传的xlsx文件:
Html代码:

<input
type="file"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
@change="uploads">

Js代码:

uploads(e) {
    // 获取到当前文件对象
    const file = e.target.files[0]
    // 传递一个FormData对象即可
    const formData = new FormData()
    formData.append('file', file) // 'file'可变相当于input表单的name属性
    // 服务器只需按照正常的上传程序代码即可
    axios.post(this.uploadUrl, formData, {
	    xsrfHeaderName: 'Authorization', // 请求头的名字自定义,用你们后台给你的就是
	    headers: {
		    'Content-Type': 'multipart/form-data',
		    'Authorization': 'Bearer ' + getToken() // 请求头的规则,用你们后台给你的就是
    }
    }).then(res => {
	    console.log(res)
	    if (res.data.result === '200') {
		    this.$message.success('上传成功')
		    this.isShowTips = true
	    } else {
	    	this.$message.error('哎呀~上传失败')
	    }
    }).catch(err => {
	    console.error(err)
	    this.$message.error('哎呀~上传失败,请稍后重试')
    })
},

(2)再说下载,我这里也是下载的xlsx文件:
Html代码(表格后面的操作按钮):

<el-table-column label="数据下载" align="center">
    <template slot-scope="scope">
    	<el-button type="primary" @click="doDownLoad(scope.$index, scope.row)">下 载</el-button>
    </template>
</el-table-column>

js代码

// 下载
doDownLoad(index, row) {
    console.log(index, row)
    axios.get('http://xxxxxxxxx/gs/file/export?id=' + row.id, {
	    responseType: 'arraybuffer', // 或者responseType: 'blob'
	    xsrfHeaderName: 'Authorization',
	    headers: {
		    'Content-Type': 'application/json',
		    'Authorization': 'Bearer ' + getToken()
	    }
    }).then(res => {
	    const blob = new Blob([res.data], {
		    type: 'application/vnd.ms-excel'
	    })
	    const objectUrl = URL.createObjectURL(blob)
	    window.location.href = objectUrl
    }).catch(err => {
    	console.log(err)
    })
}
<think>好的,我现在需要回答用户关于在Vue2项目中如何正确使用axios携带token进行身份验证的问题。首先,我要回忆一下Vue2和axios的相关知识,以及如何配置全局axios和请求拦截器。 用户提到了几个引用,我需要参考这些内容来构建答案。根据引用[3],Vue项目中需要配置全局axios,并在请求拦截器中添加token。引用[2]展示了如何在单个请求中手动添加headers,但用户可能更希望全局配置,这样每个请求都会自动携带token,避免重复代码。引用[1]则指出第一次请求可能无法携带token的问题,这可能是由于token未及时获取或拦截器未正确配置导致的。 首先,我应该分步骤说明实现方法。第一步是创建axios实例并配置基础URL,这样可以统一管理请求的基础路径。然后在请求拦截器中,从本地存储(比如localStorage或cookies)中获取token,并设置到请求头的Authorization字段中。这里需要注意,如果用户使用cookies,可能需要使用类似vue-cookies的库来获取token,如引用[2]中的例子。 接下来,需要将配置好的axios实例挂载到Vue原型上,方便在组件中使用this.$http发起请求。同时,要处理可能的异常情况,比如token不存在时的处理,或者请求失败时的错误处理。 然后,用户可能需要处理跨域问题,所以需要提到后端CORS配置,允许Authorization头,如引用[3]中提到的后端Filter配置。这部分虽然属于后端,但前端正确设置headers也是必要的。 另外,用户提到的第一次请求无法携带token的问题,可能是因为token还未存储在本地,比如登录后的token还未保存就已经发起了其他请求。因此,在登录成功后必须立即存储token,并确保后续请求在拦截器中能获取到。如果遇到第一次请求不带token的情况,可能需要检查拦截器的配置是否正确,以及token是否已正确存储。 最后,生成相关问题的时候,应该考虑用户可能进一步想知道的内容,比如如何刷新token、处理401状态码、优化拦截器等,这些都是常见的进阶问题。 现在需要将以上思考整理成结构清晰的步骤,确保每个步骤都正确引用提供的参考资料,同时使用正确的中文表达和LaTeX格式。注意,用户要求行内数学表达式用$...$,但这个问题可能不涉及数学公式,所以可能不需要。但如果有示例代码中的变量名,比如token,可以用行内代码格式而不是LaTeX。需要检查是否有需要用到LaTeX的地方,比如变量名,但这里可能不需要,所以主要关注代码块的正确格式和引用标注。 总之,回答需要分步骤,结合引用内容,确保正确性和实用性,同时生成相关问题帮助用户深入理解。</think>在Vue2项目中通过axios实现请求头携带Token进行身份验证,需按照以下步骤配置: --- ### 一、全局配置axios实例 1. 在`src`目录下创建`axios/index.js`文件,配置基础axios实例: ```javascript import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 基础URL timeout: 5000 // 超时时间 }) ``` --- ### 二、添加请求拦截器 2. **在请求拦截器中注入Token** 通过拦截器自动为每个请求添加Token,避免手动重复设置: ```javascript service.interceptors.request.use( config => { const token = localStorage.getItem('token') // 从本地存储获取Token if (token) { config.headers.Authorization = `Bearer ${token}` // 设置请求头[^3] } return config }, error => { return Promise.reject(error) } ) ``` --- ### 三、挂载全局axios实例 3. 在`main.js`中将配置好的axios实例挂载到Vue原型: ```javascript import Vue from 'vue' import axiosInstance from './axios/index' Vue.prototype.$http = axiosInstance // 组件内通过this.$http调用 ``` --- ### 四、发起携带Token的请求 4. **组件中使用封装后的axios** 无需手动设置请求头,拦截器会自动处理: ```javascript this.$http.get('/api/user/data') .then(response => { console.log(response.data) }) .catch(error => { console.error('请求失败:', error) }) ``` --- ### 五、后端配置(补充说明) 5. **确保后端允许跨域并解析Token** 后端需配置CORS允许`Authorization`请求头,并在Filter中验证Token有效性[^3]: ```java // 示例:Java Filter配置 response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type"); ``` --- ### 关键问题解决 - **首次请求无Token问题**:确保登录成功后**立即存储Token**至本地(如`localStorage.setItem('token', token)`),再发起后续请求[^1] - **Token失效处理**:可在响应拦截器中检查401状态码,触发Token刷新或跳转登录页 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

梦一场江南烟雨

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值