Django-Vue前后端分离-simplejwt认证失败返回4XX错误，导致前端错误

本文链接：https://blog.youkuaiyun.com/u014783334/article/details/124862030

本文介绍了在Vue前端使用axios访问后端DRF-simpleJWT登录接口时遇到的400、401、403错误，并提供了解决方案。通过在axios中设置请求和响应拦截器，对不同错误状态进行处理，当返回400时，前端将自动跳转至登录页面。此外，展示了axios的封装方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：

参考前几篇文章，后端我用simplejwt进行登陆认证，然后接口通过postman访问，正常登陆和错误登陆，返回都是没问题的。
DRF 使用 simpleJWT登陆认证（三）自定义认证方法

遇到的问题：

但是在前端Vue通过 axios访问登陆接口时，返回的状态码是400或者401或者403，导致前端直接就报错了。

解决思路：

网上查了一些资料，自己试了下，可以解决。思路就是：前端针对这些状态的响应数据，进行请求后 响应拦截 处理

解决过程：
备注：我是对axios进行了封装，自学不懂，也不知道封装的对不对，反正能用，抱歉！！

// request.js
import axios from 'axios'
import router from '../router/index'

 export function request (config) {
  //   創建 axions 实例
  const instance = axios.create({
    baseURL: 'http://127.0.0.1:xxxx/vueshop',
    timeout: 10000
  })
  // axios的请求拦截器
  instance.interceptors.request.use(config => {
    config.headers.Authorization = 'Bearer ' + window.sessionStorage.getItem('token')
    return config
  })
  // axios的响应拦截器
  instance.interceptors.response.use(function (response) {
    return response
  }, error => {
    const response = error.response
    const status = response.status
    console.log('error-response=', response)
    console.log('res-statu=', status)
    if (status === 400) {
      // 判断状态码是400 跳转到登录，根据需要自己添加其他的判断处理
      router.replace({ path: '/login' })
    }
    return {
      data: {
        data: '',
        error: '前端request.js判断-请重新登录'
      }
    }
  })
  //   发送 真正的网络请求
  return instance(config)
}

在其他组件通过导入使用request进行网络请求

import { request } from '../network/request.js'

这样处理后，当前端发起网络请求后，如果后端返回的是400，直接返回【前端request.js判断-请重新登录】