axios请求接口数据时报错:code: 401, message: “暂未登录或token已经过期“

错误截图:
在这里插入图片描述
现象:刚登录进去请求数据,就说过期,在网上找了很多解决方法,都不适用我。网上大多是回到登录页面,重新获取新的token,报401的错误是token时间过久,失效了。但我这情况是刚登录进去就说过期了,经过一一排查,我发现是我打错了。
解决:
经过使用浏览器的开发者工具,发现Authorization多了个$符号,于是我发现是我代码打多了。
在这里插入图片描述
改正前:
在这里插入图片描述
改正后:
在这里插入图片描述
没有报错了:
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue3中封装axios请求可以按照以下步骤进行: 1. 在src目录下新建一个api目录,用于存放与请求相关的文件。 2. 在api目录下创建一个request.js文件,并引入axios。 3. 创建一个axios实例,可以设置baseURL和timeout等参数。 4. 设置axios请求拦截器,可以在请求发送之前进行一些处理,例如添加请求头信息。 5. 设置axios的响应拦截器,可以在接收到响应后进行一些处理,例如处理错误信息。 6. 在main.js中引入封装的axios,并使用use()方法进行注册。 下面是一个示例代码: ```javascript // api/request.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 根据实际情况设置baseURL timeout: 5000, // 超间 }); // 请求拦截器 service.interceptors.request.use( (config) => { // 在发送请求之前可以进行一些处理,例如添加请求头信息 // config.headers['Authorization'] = 'Bearer token'; return config; }, (error) => { return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response) => { // 对响应数据进行处理,例如处理错误信息 // const res = response.data; // if (res.code !== 200) { // return Promise.reject(new Error(res.message || 'Error')); // } else { // return res; // } return response.data; }, (error) => { return Promise.reject(error); } ); export default service; ``` ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import axios from './api/request'; const app = createApp(App); app.config.globalProperties.$http = axios; app.mount('#app'); ``` 现在你可以在需要的组件中使用封装好的axios请求了,例如: ```javascript // 使用封装的axios请求 this.$http.get('/api/users').then((response) => { console.log(response); }).catch((error) => { console.error(error); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值