quasar中axios的封装、拦截器、token刷新（笔记）

一、封装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的凭据