解决elementUI中el |
您所在的位置：网站首页 › 中国外贸数据分析网站官网 › 解决elementUI中el |
|
解决elementUI中el-upload组件上传文件时的请求头配置问题
私有接口向后端请求数据时，通常需要携带身份认证的token信息，也就是请求头中要携带身份认证，这个认证信息在vue中通常写在请求拦截器里面，具体写法如下： import axios from "axios"; // 添加请求拦截器 axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 console.log(config); if (localStorage.token) { config.headers.Authorization = localStorage.token; } console.log(config); return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 axios.interceptors.response.use( function (response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 // console.log(response) return response; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 // this.$message.error(error.response.data); // // 获取错误状态码 // const { status } = error.response; // console.log(status) // if (status === 401) { // this.$message.error("token失效，请重新登录"); // localStorage.removeItem("mytoken"); // this.$router.push("/login"); // } return Promise.reject(error); } ); export default axios;逻辑是向浏览器本地存储中取出token，然后在请求拦截器中设置请求头，那么发起请求后，后端会验证身份信息，验证通过就放行给数据，不通过就报错 现在我写了个文件上传的功能，用到了elementUI的el-upload组件，因为没仔细看文档，结果一直token认证失败，搞了很久，才发现el-upload上传组件在上传发送请求时，不会去使用我们设置的 axios，而是在组件内部自己封装了自己的请求方法，这个方法就是headers，需要配置好，所以正确的写法应该如下： html部分 选择并上传js部分 computed: { headers() { const authorization = localStorage.getItem('token') || '' return { authorization } } },逻辑很清楚，html中绑定headers，:headers="headers"，JavaScript中通过计算属性获取localStorage中存储的token，大功告成！ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |