详解axios在vue中的用法 以及token或者session验证,响应、拦截的配置

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41629498/article/details/82702129
 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1、使用npm

npm install axios --save
2、引用axios

import axios from "axios";
使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
具体配置代码如下，我们服务端是用token验证 备注有说明

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期.如果过期则重新登录。

import axios from 'axios'
import store from '../store'
import router from '../router'
import {
Message,
Loading
} from 'element-ui'
let loading;

function startLoading() { //使用Element loading-start 方法 加载动画
loading = Loading.service({
lock: true,
text: 'Loding',
background: 'rgba(0,0,0,0.6)'
})
}

function endLoading() { //使用Element loading-close 方法 关闭动画
loading.close()
}
//生产环境判断 线下测试域名 线上服务器域名
const BASEAPI = process.env.NODE_ENV === 'development' ? 'http://114.115.211.170:8080/web/' : 'http://114.115.211.170:8080/web/'
// 创建axios实例
const request = axios.create({
baseURL: BASEAPI, //请求接口域名
timeout: 60000, // 请求超时设置
withCredentials: false, //是否让axios请求携带 cookies 如果是用session验证此处为true 默认为false可以不写
headers: {
'content-type': 'application/json'
} //请求头配置
});
// 请求拦截
request.interceptors.request.use(config => {
startLoading();
if (store.state.token) {
// console.log(store.state.token)
config.headers.token = `${store.state.token}`;
} // 让每个请求头携带存入vuex中的token 根据实际情况自行修改
return config;
}, error => {
return Promise.reject(error);
});
//响应拦截
request.interceptors.response.use(response => {
//结束加载动画
endLoading()
//此处判断token/ession是否过期然后跳转login页面 从新获取 我们后台token过期为-30
if (response.data.code == -30) {
router.push('/login')
}
return response;
}, error => {
endLoading()
console.log(error)
return Promise.reject(error);
});

export default request
具体使用：

上面配置文件命名为http.js 

import request from './http'
//get
request('xxxx/xxxxx')
.then(res=> {
console.log(res);
})
.catch( error=> {
console.log(error);
});

// post
request({
method:'post',
url: 'xxxx/xxxxx',
data: {
textbook_id:id,
token:token
}
})
.then(res=> {
console.log(res);
})
.catch(error=> {
console.log(error);
});
 

文章最后发布于: 2018-09-14 14:56:16
————————————————
版权声明：本文为CSDN博主「子谦呀」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41629498/article/details/82702129