前端请求和响应拦截器（技术栈vue）

哆啦Ci梦

已于 2022-08-06 09:37:15 修改

阅读量2k

点赞数

分类专栏： web开发（python+vue前后端分离）文章标签： http html vue.js

于 2021-09-14 15:55:28 首次发布

本文链接：https://blog.csdn.net/u010046615/article/details/120289450

版权

web开发（python+vue前后端分离）专栏收录该内容

5 篇文章 5 订阅

订阅专栏

本文介绍了如何在Vue.js项目中利用axios创建自定义的请求（request）和响应（response）拦截器。主要目的是在每个非登录（login）请求中添加Authorization头部的token，并在响应中检查状态码，若未通过鉴权，则自动重定向至登录页面，以增强前端的安全性和用户体验。

摘要由CSDN通过智能技术生成

用途：通过axios封装项目自用的请求和响应拦截器，能够在每个request请求(除了login请求）加入Authorization头部token；能够在每个response响应中识别状态码，如果未通过鉴权则自动跳转到登录页。最终实现方便的请求处理。

使用：可以在前端项目中方便的导入该js，进行request请求处理。

技术栈：vue

request.js

import axios from 'axios'
import {Base64} from "js-base64";


const showStatus = (status) => {
    let message = ''
    switch (status) {
        case 400:
            message = '请求错误(400)'
            break
        case 401:
            message = '未授权，请重新登录(401)'
            break
        case 403:
            message = '拒绝访问(403)'
            break
        case 404:
            message = '请求出错(404)'
            break
        case 408:
            message = '请求超时(408)'
            break
        case 500:
            message = '服务器错误(500)'
            break
        case 501:
            message = '服务未实现(501)'
            break
        case 502:
            message = '网络错误(502)'
            break
        case 503:
            message = '服务不可用(503)'
            break
        case 504:
            message = '网络超时(504)'
            break
        case 505:
            message = 'HTTP版本不受支持(505)'
            break
        default:
            message = `连接出错(${status})!`
    }
    return `${message}，请检查网络或联系管理员！`
}

const request = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //基础路径,.env.development，用于适配后端开发环境api路径处理
    timeout: 5000 //超时时间，5000毫秒
})

// 请求拦截器封装，具体可以搜索axios封装
request.interceptors.request.use(
    config => {// 添加鉴权请求头
        if(config.url===process.env.VUE_APP_SERVICE_URL+'/login'){ //注意，如果是发给后端的Login，不用带auth头，直接返回
            return config;
        } else { //不是login请求才需要auth头
            if (localStorage.getItem("userToken")) {
                let password =''
                config.headers['Authorization']='Basic '+Base64.encode(localStorage.getItem("userToken")+ ':' +password)
                return config;
            }else {window.location.href = '/#/login';}

        }

    }
);
// 响应拦截器
request.interceptors.response.use((response) => {
    const status = response.status
    let msg = ''
    if (status < 200 || status >= 300) {
        // 处理http错误，抛到业务代码
        msg = showStatus(status)
        if (typeof response.data === 'string') {
            response.data = {msg}
        } else {
            response.data.msg = msg
        }
    }
    return response
}, (error) => {
    // 错误抛到业务代码
    const status = error.response.status
    // console.log(error.response)
    // console.log(status)
    error.data = {}
    error.data.msg = showStatus(status)
    if (status===401){// 401说明鉴权未通过，跳转到登录页
        window.location.href = '/#/login';
    }
    return Promise.resolve(error)
})
export default request  // 导出自定义的axios对象