以上问题进行改进,前端使用vue2技术,从cookie中获取token信息,请给出前端下载的完整代码
时间: 2024-09-26 13:17:15 浏览: 70
vue项目中js-cookie的使用存储token操作
如果你正在使用Vue.js 2.x并且想从cookie中获取token并用于下载Excel文件,你可以参考以下代码片段:
首先,确保安装了`axios`和`vue-cookie`库,可以用npm或yarn安装:
```bash
npm install axios vue-cookie
# 或者
yarn add axios vue-cookie
```
然后,在`main.js`或其他入口文件中配置axios的请求拦截器,获取cookie中的token:
```javascript
import Vue from 'vue';
import axios from 'axios';
import VueCookie from 'vue-cookie';
Vue.use(VueCookie);
const instance = axios.create({
baseURL: '你的API基础URL',
headers: {
'Content-Type': 'application/json'
},
});
instance.interceptors.request.use(config => {
const token = VueCookie.get('yourTokenKey');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => Promise.reject(error));
// 初始化Vue实例
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
```
接下来,在组件中发起下载请求:
```javascript
export default {
methods: {
downloadExcel() {
this.$http.post('/api/export', { targetUser: tTargetUser }, {
responseType: 'blob',
}).then(response => {
const blob = response.data;
// 检查状态码是否成功
if (response.status === 200) {
saveAs(blob, '用户指标超市.xlsx');
} else {
console.error('Error downloading file:', response.statusText);
}
})
.catch(error => {
console.error('Error:', error);
});
},
},
};
```
这里的`$http`是对axios的简写,如果在Vue 2中直接使用,记得导入`axios`:
```javascript
import axios from 'axios';
```
阅读全文