Vue3哀求拦截器里如何配置token

2024-11-2 22:44| 发布者: db4d5a85| 查看: 35| 评论: 0

摘要: 目录Vue3哀求拦截器配置tokenVue3的axios哀求封装，哀求拦截，相应拦截axios哀求封装哀求拦截和相应拦截接口的哀求总结Vue3哀求拦截器配置token [code]// axios哀求拦截器 httpInstance.interceptors.request.use(co

Vue3哀求拦截器配置token

[code]// axios哀求拦截器 httpInstance.interceptors.request.use(config => { console.log('哀求拦截器',config); const userStore = useUserStore() const token = userStore.userInfo.token if(token){ //固定写法 config.headers.Authorization = `Bearer ${token}` //留意Bearer背面的空格 } return config }, e => Promise.reject(e)) [/code]

Vue3的axios哀求封装，哀求拦截，相应拦截

对于三者放在Service.js中封装，方便使用

[code]axios.create[/code] 的作用是创建一个新的 [code]axios[/code] 实例，该实例可以具有自界说配置。

通过使用 [code]axios.create[/code]，您可以为任何 API 生成一个客户端，并在使用同一客户端的任何调用中重复使用相同的配置。

这使得在应用程序中使用多个 API 时更加方便，因为您可以为每个 API 创建一个单独的实例，并在每个实例中设置差别的配置。

[code]axios.create[/code] 方法担当一个配置对象作为参数，该对象包罗以下属性：

[code]baseURL[/code]：用于全部哀求的基本 URL。
[code]headers[/code]：要发送的自界说 headers。
[code]timeout[/code]：指定哀求超时之前的毫秒数。
[code]withCredentials[/code]：指示是否应该使用跨站点访问控制（CORS）根据。
[code]xsrfCookieName[/code]：用作 xsrf 令牌值的cookie的名称。
[code]xsrfHeaderName[/code]：包罗 xsrf 令牌值的 HTTP 头的名称。

比方，以下代码创建了一个新的 axios 实例，并将其配置为使用 [code]/api/[/code] 作为基本 URL：

[code]const instance = axios.create({ baseURL: '/api/' });[/code]

axios哀求封装

[code]// 用create创建axios实例 const Service = axios.create({ timeout: 3000, baseURL: 'http://127.0.0.1:8888/api/private/v1/', headers: { 'Content-type': 'application/json;charset=utf-8' } }) // get 数据哀求封装 export const get = config => { return Service({ ...config, method: 'get', data: config.data, }) } // post 数据哀求封装 export const post = config => { return Service({ ...config, method: 'post', data: config.data, }) }[/code]

哀求拦截和相应拦截

在 Vue3 中，可以使用 Axios 库来举行 HTTP 哀求。Axios 库提供了哀求拦截器和相应拦截器，以便在哀求发送和相应返回时执行一些操纵。

哀求拦截器可以用于在哀求发送前执行一些操纵，比方添加 token、设置哀求头等。相应拦截器可以用于在相应返回后执行一些操纵，比方处置处罚错误信息、剥离无效数据等。

[code]let loadingObj = null; // 哀求拦截，增长loading，对哀求统一处置处罚 Service.interceptors.request.use((config) => { loadingObj = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) return config; }) // 相应拦截，对返回值做同意处置处罚 Service.interceptors.response.use(response => { loadingObj.close(); const data = response.data; if (!data.data) { ElMessage.error(data.meta.msg || '服务器错误') } else { ElMessage({ message: '登录乐成', type: 'success', duration: 1500 }) } return response.data; }, error => { loadingObj.close(); ElMessage({ message: '服务器错误', type: 'error', duration: 2000 }) })[/code]

接口的哀求

[code]import { get, post } from './service' // 登录数据哀求 export const loginAPI = data => { return post({ url: '/login', data }) }[/code]

总结

以上为个人履历，希望能给各人一个参考，也希望各人多多支持脚本之家。

来源：https://www.jb51.net/javascript/326641hkj.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：vue实现两级select联动+input赋值+select选项清空下一篇：如何用node.js作为后台,读写xml文件,Node.js的文件体系的Api

账号		自动登录	找回密码
密码			立即注册