我要评论vue3请求拦截器配置token
// 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))
vue3的axios请求封装，请求拦截，相应拦截
对于三者放在service.js中封装，方便使用
axios.create 的作用是创建一个新的 axios 实例，该实例可以具有自定义配置。
通过使用 axios.create，您可以为任何 api 生成一个客户端，并在使用同一客户端的任何调用中重复使用相同的配置。
这使得在应用程序中使用多个 api 时更加方便，因为您可以为每个 api 创建一个单独的实例，并在每个实例中设置不同的配置。
axios.create 方法接受一个配置对象作为参数，该对象包含以下属性：
baseurl：用于所有请求的基本 url。headers：要发送的自定义 headers。timeout：指定请求超时之前的毫秒数。withcredentials：指示是否应该使用跨站点访问控制（cors）凭据。xsrfcookiename：用作 xsrf 令牌值的cookie的名称。xsrfheadername：包含 xsrf 令牌值的 http 头的名称。
例如，以下代码创建了一个新的 axios 实例，并将其配置为使用 /api/ 作为基本 url：
const instance = axios.create({
baseurl: '/api/'
});axios请求封装
// 用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,
})
}请求拦截和响应拦截
在 vue3 中，可以使用 axios 库来进行 http 请求。axios 库提供了请求拦截器和响应拦截器，以便在请求发送和响应返回时执行一些操作。
请求拦截器可以用于在请求发送前执行一些操作，例如添加 token、设置请求头等。响应拦截器可以用于在响应返回后执行一些操作，例如处理错误信息、剥离无效数据等。
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
})
})接口的请求
import { get, post } from './service'
// 登录数据请求
export const loginapi = data => {
return post({
url: '/login',
data
})
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论