封装axios

封装axios

1. 访问路径时需要携带token内容，我们可以通过封装axios，设置请求拦截，达到所有路径请求成功之后携带token的效果。
2. 当token过期或者错误时，我们可以通过封装axios，设置响应拦截，移除token的值，跳转到登录页面。

// 封装axios
import axios from 'axios'
import router from '../router';

//请求拦截 config是请求对象
axios.interceptors.request.use((config:any)=>{
    //如果请求成功
    //携带token
    if(localStorage.token){
        config.headers.Authorization = localStorage.token;
    }
    return config; //返回的config带有token
},(error)=>{
    //请求失败
    return Promise.reject(error);
})

//响应拦截
axios.interceptors.response.use(response => {
    return response;
},(error)=>{
    // console.log(error.response)
    // 解构status的内容
    const {status} = error.response;

    // 判断status的状态
    if(status === 401){ //如果是401.说明token已经过期了或者说token错误
        localStorage.removeItem("token");//移除token的值

        router.push("/login")
    }
    return Promise.reject(error)
})

export default axios;


/**
 * token 可以被解析成对象 
 * 通过代码接卸需要安装 npm install jwt-decode
 * 在login组件里面通过localStorage存储的token,可以在login组件中对token进行解析
 */