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

最新推荐文章于 2024-12-20 02:52:12 发布

中原猪精

最新推荐文章于 2024-12-20 02:52:12 发布

阅读量2.8k

点赞数 1

分类专栏： vue_study 文章标签： vue

本文链接：https://blog.csdn.net/qq_42257997/article/details/109235406

版权

本文介绍了如何在Quasar项目中封装axios，并设置拦截器以实现在token即将过期时自动刷新。首先，讨论了在quasar.conf.js中配置baseURL和代理的方法。接着，详细阐述了封装axios的过程，包括创建api目录，配置并使用api文件。然后，重点讲解了使用拦截器实现token刷新的逻辑，包括登录接口和刷新token接口的响应处理，以及如何利用vuex持久化用户状态。最后，展示了设置axios请求和响应拦截器的步骤，确保在token过期时能无缝刷新或提示用户重新登录。

摘要由CSDN通过智能技术生成

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