vue --- axios拦截器+form格式请求体

在vue2.x中使用CLI生成的模板有很大改变，需要自己手动在main.ts同级目录下新建interceptors.ts

interceptors.ts

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



// axios配置
axios.defaults.timeout = 6000;
axios.defaults.baseURL = 'http://192.168.7.69:8000';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 设定请求头内容格式为form



// http request 拦截器
axios.interceptors.request.use(
    config =>{
        if (localStorage.token){ // 判断token是否存在
            config.headers.Authorization = localStorage.token;
        }
        return config;
    },
    error => {
        return Promise.reject(error)
    }
);

// http response 拦截器
axios.interceptors.response.use(
    response =>{
        return response
    },
    error => {
        if (error.response.data.result === 2){
        // 这里是http请求失败后的返回判断，根据个人情况判断
            router.replace('/login')
                .then(
                    r =>{
                        localStorage.clear();
                        error.message = '身份已过期，请重新登录';
                    }
                );
        }else {
            return Promise.reject(error)
        }
    }
);

router.beforeEach(((to, from, next) => {
    if (to.meta.requireAuth){ //判断该路由是否需要登陆权限
        if(localStorage.token){ //token存在
            next()
        }else {
            next(  // token不存在
                {
                    path:'/login',
                    query:{
                        redirect:to.fullPath
                    }
                }
            )
        }
    }else { //如果不需要权限校验，直接跳转
        next()
    }
}));

export default axios;

main.ts

在main.ts中导入拦截器

import axios from './interceptors';

添加到VUE属性上

Vue.use(VueAxios,axios);

在使用的地方

this.axios.get('') // get请求

存储token到localstorage

登录成功之后

 window.localStorage["token"] = res.data.token

使用qs设置form表单请求体

网上有人说qs包含在axios中，但我在使用的时候不能导入。提示下载@types/qs，之后再用到的模块导入

import QS from 'qs'

应用：

let reqData = {
             username:this.ruleForm.username,
             password:md5(this.ruleForm.password)
         };
         
this.axios.post("/login",QS.stringify(reqData))
                     .then()

介绍了一些基本使用，具体问题欢迎留言探讨！