axios的基本配置使用以及登录注册时候遇到的问题

话不多说，贴上代码，一般都是新建一个api，写入接口的js代码，不同类型的接口写不同类型的js文件内，方便管理维护

接口js

import axios from 'axios'     //引入axios

import Cookies from 'js-cookie'     //引入js-cookie

axios.defaults.baseURL='http://127.0.0.1:8000/';       //配置基本的后台接口路径

// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;     

axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';       //header配置

if (Cookies.get('token')) {// 判断是否存在token，如果存在的话，则每个http header都加上token，因为作者使用的是JWT用户认证模式

  axios.defaults.headers.common['Authorization'] =`JWT ${Cookies.get('token')}`;

}

axios的get，拉取数据

//拉取热搜关键词

export const getSearchHot= (parms) => {

return new Promise((resolve, reject) => {

axios.get('/api/searchHot/' + parms).then(res=>{       //get后面跟的请求地址

resolve(res)})

.catch(error=>{reject(error)});

  })

};

axios的post，发送数据

//发送相册图片

export const postAlbum= (parms) => {

return new Promise((resolve, reject) => {

axios.post('/api/album/',parms).then(res=>{

resolve(res)})

.catch(error=>{reject(error)});

  })

};

axios的put，更新数据

//更新用户个人信息

export const updateUser= (parms) => {

return new Promise((resolve, reject) => {

axios.put('/api/user/1/',parms).then(res=>{

resolve(res)})

.catch(error=>{reject(error)});

  })

};

axios的delete，删除数据

//删除文章

export const deleteArticle= (parms) => {

return new Promise((resolve, reject) => {

axios.delete('/api/article/' + parms +'/').then(res=>{

resolve(res)})

.catch(error=>{reject(error)});

  })

};

比方说是最上面第一个获取热搜关键词的接口的使用，首先引入接口

import {getSearchHot} from "../api/article";

然后在methods中定义一个方法来获取这个接口的数据

methods:{

  getHotSearchList(){

getSearchHot(‘’).then(res=>{

console.log(res.data);      //这里是拉取正确情况下的接口数据的，你可以console.log(res.data)，查看后台发送过来的数据

    }).catch(error=>{

console.log(error.data);     //如果接口访问出错，上面的res.data则不会有，返回的只有这里的error.data，你可以看到后台发送过来的错误提示

    })

},

}

然后注册了接口的使用方法，自然是要调用拉，你可以在created生命周期中调用这个方法

created(){

this.getHotSearchList();

},

不过有一个坑，当我用户退出然后登录别的账号时，发现请求来的信息还是之前的那个账户，自己明明更新了store中的token以及cookie中的token，可是请求的时候还是之前的账号，想来想去，明白了原因，因为请求头塞的还是之前的token，所以，在登录注册之后，需要将请求头更新一下，（由于我注册之后是直接将token后台传过来的，直接注册等于已经登录了，无需用户注册之后再自行登录）。以下是我的代码，在登录成功了只有将res.data中的token直接更新到请求头中。

login(vm.ruleForm).then(res=>{

NProgress.done();

  Cookies.remove('token');

  Cookies.set('token',res.data.token,{expires:7, path:'' });

  // getUser('').then(res=>{

//  console.log(res.data);

//  vm.SET_header_image(res.data.header_image);

// });

// vm.SET_token(Cookies.get('token'));

  axios.defaults.headers.common['Authorization'] =`JWT ${res.data.token}`;

  vm.$router.push('/');

}).catch(error=>{

NProgress.done();

  vm.loginButtonText='快速登录';

  vm.$message.error('登录失败！');

})