- 前提:
参考前几篇文章,后端我用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判断-请重新登录】