(Axios拦截器)从后台拿到token后存到headers中方法以及token过期报401的解决方法

2020/12/03 10:35
阅读数 440

我自己根据method是GET还是POST请求分开定义了两个axios

let myPost = axios.create({
   
   //POST请求
    baseURL: urls.baseUrl,
    method: 'post',
})
let myGet = axios.create({
   
   //GET请求
    baseURL: urls.baseUrl,
    method: 'get',
})

请求拦截器(请求之前的操作)

myPost.interceptors.request.use(config => {
   
   
    if (sessionStorage.getItem("token")) {
   
   //在这里获取到登录成功后存的token,并加到headers中
        config.headers.token = sessionStorage.token
    }
    console.log(config)
    return config;
}, error => {
   
   
    console.log(error);
    return Promise.reject();
})
myGet.interceptors.request.use(config => {
   
   
    if (sessionStorage.getItem("token")) {
   
   
        config.headers.token = sessionStorage.token
    }
    console.log(config)
    return config;
}, error => {
   
   
    console.log(error);
    return Promise.reject();
})

响应拦截器(请求后的操作)

myPost.interceptors.response.use(response => {
   
   
    if (response.status === 200) {
   
   
        return response;
    } else {
   
   
        Promise.reject();
    }
}, error => {
   
   
    //错误跳转(这里只是根据我自己的项目做得操作【这里你们根据自己的项目来判断错误时的处理】)
    if (error.response.status === 500) {
   
   
        console.log(error.response.data.info)
    } else if (error.response.status === 401) {
   
   
        sessionStorage.setItem("isLogin", false);
        console.log(sessionStorage.getItem("isLogin"));
        router.push({
   
    path: "/" })
        router.go(0)
        return Promise.reject();
    }
})
myGet.interceptors.response.use(response => {
   
   
    if (response.status === 200) {
   
   
        return response;
    } else {
   
   
        Promise.reject();
    }
}, error => {
   
   
    //错误跳转
    if (error.response.status === 500) {
   
   
        console.log(error.response.data.info)
    } else if (error.response.status === 401) {
   
   
        sessionStorage.setItem("isLogin", false);
        console.log(sessionStorage.getItem("isLogin"));
        router.push({
   
    path: "/" })
        router.go(0)
        return Promise.reject();
    }
})
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部