token无感刷新

直接上代码

首先准备两个工具文件

ps:文件名可以随便取哈,尽量有语义化一点即可

login.vue

<template>
  <div>
    <form>
      手机号： <input v-model="form.mobile" type="text" name="" id="" /><br />
      验证码: <input v-model="form.code" type="text" name="" id="" /><br />
      <input type="button" value="登录" @click="login" />
      <!-- =={
   
   { form }} -->
    </form>
  </div>
</template>
<script>
import { loginApi } from '@/api/user'
export default {
  name: '',
  data () {
    return {
      form: {
        mobile: '13455555555',
        code: '246810'
      }
    }
  },
  created () {},
  computed: {},
  methods: {
    async login () {
      const res = await loginApi(this.form)
      localStorage.setItem('token', JSON.stringify(res.data))
      this.$router.push('/user')
    }
  }
}
</script>
<style lang='less'  scoped>
</style>

user.vue

<template>
  <div>
    姓名：{
   
   { userInfo.name }}
    <img style="width: 100px" :src="userInfo.photo" alt="" />
  </div>
</template>

<script>
import { userApi } from '@/api/user'
export default {
  name: '',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    this.getUser()
  },
  computed: {},
  methods: {
    async getUser () {
      const res = await userApi()
      this.userInfo = res.data
    }
  }
}
</script>
<style lang='less'  scoped>
</style>

重点来了准备一个request.js文件

多说无益,思路都在代码里面,按顺序的一步一步来即可

// 1. 导入axios包
import axios from 'axios'
// 2. 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://toutiao.itheima.net/v1_0',
  timeout: 5000
})
// 7. 创建一个新的axios实例
const requestFreshToken = axios.create({
  baseURL: 'http://toutiao.itheima.net/v1_0',
  timeout: 5000
})
// 3. 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 5. 在发送请求之前做些什么
    // 5.1 获取点击登录后的token
    const tokenObj = JSON.parse(localStorage.getItem('token'))
    if (tokenObj && tokenObj.token) {
      // 5.2 设置请求头
      config.headers.Authorization = 'Bearer ' + tokenObj.token
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 4. 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data
  },
  async function (error) {
    // console.log(error.response, 222);
    // 6. 当token失效时
    if (error.response.status === 401) {
      // 6.1 解决token过期的问题
      const tokenObj = JSON.parse(localStorage.getItem('token'))// 与5.1一致  可以直接写在外面(全局)
      // 7.1 重新发送一次请求,设置一个新的请求头freshToken
      const res = await requestFreshToken({
        method: 'PUT',
        url: '/authorizations',
        headers: {
          Authorization: 'Bearer ' + tokenObj.refresh_token
        }
      })
      // 7.2 重新设置token和freshToken
      localStorage.setItem(
        'token',
        JSON.stringify({
          token: res.data.data.token,
          refresh_token: tokenObj.refresh_token
        })
      )
      // 8.这里重新发送请求后  使用的是request  又会走上面的请求拦截  又会重新携带刚刚存的新的token
      return instance(error.response.config)
    }
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance