How to request interceptors in the Vue network?

This article mainly introduces the practical application of interceptors in Vue network requests. Now I will share it with you and give you a reference.

Project background

Recently during project development, I encountered the following problem:

1. In Progress Before Minggan operates, each request needs to carry a token, but the token has a validity period. After the token expires, you need to exchange for a new token and continue the request.

Requirement Analysis

1. Each request needs to carry a token, so we can use the axios request interceptor. Here, we give each Add tokens to all requests, so you can save copy-pasting code again and again for each request.

2. Token invalidation problem, when our token expires, our server will return a specific error indication, such as token invalid, but we cannot refresh the token after each request. Yeah, so here we use the axios response interceptor. We uniformly process all the response data after the request is successful, and then process the special data and distribute the rest normally.

Function implementation

After analyzing the problem, let’s implement the function

Install axios, here we will Describe how to install axios.

Register axios in main.js

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

Note: qs, use axios, must We need to install qs. For all Post requests, we need qs to serialize parameters.

In the request interceptor implementation

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 2500
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)

In the response interceptor implementation

axios.interceptors.response.use(
 response => {
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
   // 刷新token
   store.dispatch('refresh').then(response => {
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
  return Promise.reject(error)
 }
)

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

vue implements a label click highlighting method

Vue-Highlighting of the routing navigation menu bar Setting method

Four ways for Vue to implement two-way binding

##

The above is the detailed content of How to request interceptors in the Vue network?. For more information, please follow other related articles on the PHP Chinese website!