Home >Web Front-end >JS Tutorial >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:
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
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.
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!