react前端axios使用jwt token依然401 踩坑

最新推荐文章于 2023-12-14 10:34:47 发布

M_H5211

最新推荐文章于 2023-12-14 10:34:47 发布

阅读量1.1k

点赞数

分类专栏：全栈坑文章标签： 401 unauthorized drf-jwt token

本文链接：https://blog.csdn.net/M_H5211/article/details/115494163

版权

在使用Django drf jwt进行前后端分离的鉴权过程中，前端通过axios获取并存储JWT Token后，在请求授权接口时仍遇到401错误。经过排查，发现错误在于认证格式需为'JWT <token>'而非'Bearer <token>'，修改后问题得到解决。

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

调试完成Django drf jwt授权后在前端使用token请求授权接口依然是401，没有直接处理完成，记录处理过程以便分析

请求与生成token供前端使用参见《前后端分离使用drf jwt的token鉴权》

准备

axios使用用户名与密码获取token 并存储在localstorage中

    let user = 'testuser'
    let pass =  'testpassword'
    axios.post('http://localhost:8008/Plum/getToken',{
        username:user,
        password:pass
    }).then(res =>{
        const {token } = res.data;
        localStorage.setItem('token',token)
        setAuthToken(token)
    })

//setAuthToken 如下 设置供后续接口使用
function setAuthToken(token){
    if(token){
     // axios.defaults.headers.common['Authorization'] = token ; 
      axios.defaults.headers.common['Authorization'] = "JWT "+token ; //最后修改代码为
    }else{
      delete axios.defaults.headers.common['Authorization'];
    }
}
</