vue请求拦截器响应拦截器

最新推荐文章于 2024-03-13 22:26:47 发布

季布，

最新推荐文章于 2024-03-13 22:26:47 发布

阅读量1.9k

点赞数 4

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47906106/article/details/127713346

版权

Vue 专栏收录该内容

84 篇文章 12 订阅

订阅专栏

在这里插入图片描述

import axios from "axios";
// 创建一个axios的app

const request = axios.create({
    baseURL:'http://127.0.0.1:8000/api/v1/',
    timeout:5000
})

// 请求拦截器
request.interceptors.request.use(
    // ts写法 config:any
    (config)=>{
        // 获取本地localstorage的TOKEN
        let token = localStorage.getItem(token)
        // 判断是否有token
        if(token){
            config.headers.common['token']=token
        }
        return config

    },
    (error)=>{
        Promise.reject(error)

    }
)

// 响应拦截器
request.interceptors.response.use()

// 暴露 
export default request

这时会报跨域的请求头中没有token这一属性
在后端setting中加入

# 默认为:
CORS_ALLOW_HEADERS = [
	'token',
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

request.js

import axios from "axios";
import { ElMessage } from "element-plus";
// 创建一个axios的app

const request = axios.create({
    baseURL:'http://127.0.0.1:8000/api/v1/',
    timeout:5000
})

// 请求拦截器
request.interceptors.request.use(
    // ts写法 config:any
    (config)=>{
        // 获取本地localstorage的TOKEN
        let token = localStorage.getItem(token)
        // 判断是否有token
        if(token){
            config.headers.common['token']=token
        }
        return config

    },
    (error)=>{
        Promise.reject(error)

    }
)

// ==== 响应拦截器(response)=====
request.interceptors.response.use(
    (response) => response,
    (error) => {
        if (error && error.response) {
            error.data = {};
            switch (error.response.status) {
                case 400:
                    error.data.msg = '错误请求';
                    ElMessage.error(error.data.msg)
                    break
                case 401:
                    error.data.msg = '未授权，请重新登录';
                    ElMessage.error(error.data.msg)
                    break
                case 403:
                    error.data.msg = '拒绝访问';
                    ElMessage.error(error.data.msg)
                    break
                case 404:
                    error.data.msg = '请求错误,未找到该资源';
                    ElMessage.error(error.data.msg)
                    break
                case 405:
                    error.data.msg = '请求方法未允许';
                    ElMessage.error(error.data.msg)
                    break
                case 408:
                    error.data.msg = '请求超时';
                    ElMessage.error(error.data.msg)
                    break
                case 500:
                    error.data.msg = '服务器端出错';
                    ElMessage.error(error.data.msg)
                    break
                case 501:
                    error.data.msg = '网络未实现';
                    ElMessage.error(error.data.msg)
                    break
                case 502:
                    error.data.msg = '网络错误';
                    ElMessage.error(error.data.msg)
                    break
                case 503:
                    error.data.msg = '服务不可用';
                    ElMessage.error(error.data.msg)
                    break
                case 504:
                    error.data.msg = '网络超时';
                    ElMessage.error(error.data.msg)
                    break
                case 505:
                    error.data.msg = 'http版本不支持该请求';
                    ElMessage.error(error.data.msg)
                    break
                default:
                    error.data.msg = `连接错误${error.response.status}`;
                    ElMessage.error(error.data.msg)
            }
        } else {
            error.data.msg = "连接到服务器失败";
            ElMessage.error(error.data.msg)
        }
        return Promise.reject(error);
    }
);


// 暴露 
export default request