一、封装axios请求
import libAxios from 'axios'
// axios网络请求封装请求开始
const axios = libAxios.create({
baseURL: process.env.API_ROOT,
timeout: 15000,
withCredentials: false,
headers: {
'Content-Type': 'application/json;charset=utf-8',
'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
'Access-Control-Allow-Methods': 'OPTIONS, GET, POST'
}
})
export default axios
其中,baseURL的地址在文件quasar.conf.js里配置
build配置里
env: ctx.dev
? {
// so on dev we'll have
API_ROOT: JSON.stringify('/v1')
}
: {
// and on build (production):
API_ROOT: JSON.stringify('http://***.***.**.**:8088/v1')
}
设置代理devServer
devServer: {
https: false,
port: 8080,
open: true, // opens browser window automatically
proxy: {
'/v1': {
target: 'http://***.***.***.**:8088',
changeOrigin: true
}
}
},
以上就是axios的封装
使用封装后的axios
配置api,新建目录,新建api文件
//我封装的位置,引进来
import axios from 'src/lib/axios'
export const login = ({ mobile, password}) => {
const data = {
mobile,
password,
}
return axios({
url: '/login',
method: 'post',
data
})
}
使用
<script>
import { login } from 'src/api/common'
export default {
name: 'Login',
data () {
return {
form: {
mobile: '',
password: ''
}
}
},
methods:{
onSubmit () {
login(this.form).then(data => {
console.log(data)
})
}
}
}
</script>
二、拦截器+token刷新
我这里设置拦截器的目的是实现保持登录功能,我的token一小时过期,所以需要在快过期的时候通过refreshToken(一般十几天过期)重新获取token,当refreshToken过期时提醒用户重新登录或者直接跳到登录页
1.先看一下我的两个接口(登录接口、token刷新接口)所返回的数据,只看一下模拟的接口,后台的具体实现暂且不表
登录接口login——返回access_token作为令牌,refresh_token作为刷新access_token的凭据