后端java 微信小程序使用 jwt token前端uniapp如何在更换token后重新发送原来的请求详细代码

在前端uniapp中，我们可以通过拦截请求的方式来实现在更换token后重新发送原来的请求。具体实现步骤如下：

在前端uniapp中，我们可以通过拦截请求的方式来实现在更换token后重新发送原来的请求。具体实现步骤如下：
在前端uniapp中，我们可以通过拦截请求的方式来实现在更换token后重新发送原来的请求。具体实现步骤如下：
在前端uniapp中，我们可以通过拦截请求的方式来实现在更换token后重新发送原来的请求。具体实现步骤如下：
在前端uniapp中，我们可以通过拦截请求的方式来实现在更换token后重新发送原来的请求。具体实现步骤如下：
在前端uniapp中，我们可以通过拦截请求的方式来实现在更换token后重新发送原来的请求。具体实现步骤如下：
在前端uniapp中，我们可以通过拦截请求的方式来实现在更换token后重新发送原来的请求。具体实现步骤如下：
在拦截器中，判断当前请求是否为需要携带token的请求，如果是则将新的token设置到请求头中，并将请求重新发送。

代码实现如下：

// http.js
import Vue from 'vue'
import axios from 'axios'
import store from '@/store'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 判断是否存在token，如果存在则将token设置到请求头中
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
    }
    return config
  },
  error => {
    // 请求错误处理
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 判断返回的状态码是否为200
    if (res.code !== 200) {
      Vue.prototype.$message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      // 判断是否为token过期错误码，如果是则重新获取token并重新发送请求
      if (res.code === 401) {
        return store.dispatch('user/refreshToken').then(() => {
          const config = response.config
          config.headers['Authorization'] = 'Bearer ' + store.getters.token
          return axios.request(config)
        })
      }
      return Promise.reject('error')
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Vue.prototype.$message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

在上面的代码中，我们通过判断返回的状态码是否为401来判断是否为token过期错误码。如果是，则调用store中的refreshToken方法重新获取token，并在获取到新的token后重新发送请求。

// store/user.js
import { login, refreshToken } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'

const user = {
  state: {
    token: getToken()
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    REMOVE_TOKEN: (state) => {
      state.token = ''
    }
  },
  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        login(username, password).then(response => {
          const { data } = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 刷新token
    refreshToken({ commit, state }) {
      return new Promise((resolve, reject) => {
        refreshToken(state.token).then(response => {
          const { data } = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 退出登录
    Logout({ commit }) {
      return new Promise((resolve, reject) => {
        removeToken()
        commit('REMOVE_TOKEN')
        resolve()
      })
    }
  }
}

export default user

在store中，我们定义了refreshToken方法来获取新的token。在获取到新的token后，我们通过commit方法将新的token保存到store的state中，并通过setToken方法将新的token保存到本地存储中。

在以上代码实现的基础上，我们在需要携带token的请求中，通过设置Authorization请求头来携带token。这样我们就可以在更换token后重新发送原来的请求了。

// api/user.js
import request from '@/utils/request'

// 登录
export function login(username, password) {
  return request({
    url: '/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

// 刷新token
export function refreshToken(refreshToken) {
  return request({
    url: '/user/refreshToken',
    method: 'post',
    data: {
      refreshToken
    }
  })
}

// 获取用户信息
export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

// 退出登录
export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

在以上代码中，我们通过使用request方法来发送请求，该方法会自动发送携带token的请求头

后端java 微信小程序使用 jwt token前端uniapp如何在更换token后重新发送原来的请求详细代码