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

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


axios的基本配置使用以及登录注册时候遇到的问题_第1张图片
接口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('登录失败!');

})


你可能感兴趣的