Vue 네트워크에서 인터셉터를 요청하는 방법은 무엇입니까?

이 글에서는 Vue 네트워크 요청에서 인터셉터의 실제 적용을 주로 소개하고 참고 자료를 제공합니다.

프로젝트 배경

최근 프로젝트 개발 중에 다음과 같은 문제에 직면했습니다.

1. Minggan 작업을 수행하기 전에 각 요청에는 토큰이 있어야 하는데 토큰에는 유효 기간이 있으므로 토큰이 만료되면 새 토큰으로 교체하고 요청을 계속하세요.

요구사항 분석

1. 각 요청은 토큰을 전달해야 하므로 axios 요청 인터셉터를 사용할 수 있습니다. 여기서는 각 요청을 반복해서 저장할 수 있도록 각 요청에 토큰을 추가합니다. 코드를 붙여넣으세요.

2. 토큰 무효화 문제, 토큰이 만료되면 서버는 토큰 유효하지 않음과 같은 특정 오류 표시를 반환하지만 각 요청 후에 토큰을 새로 고칠 수 없으므로 여기서는 axios를 사용합니다. 응답 인터셉터에서 균일하게 처리합니다. 요청이 성공한 후 모든 응답 데이터를 처리한 다음 특수 데이터를 처리하고 나머지는 정상적으로 배포합니다.

함수 구현

문제를 분석한 후, 함수를 구현해 봅시다

Axios를 설치하는 방법을 설명하겠습니다.

main.js에 axios를 등록하세요

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

참고: qs, axios를 사용하려면 qs를 설치해야 합니다. 모든 Post 요청에 대해 매개변수를 직렬화하려면 qs가 필요합니다.

요청 인터셉터에 구현됨

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)
 }
)

응답 인터셉터에 구현됨

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)
 }
)

위 내용은 나중에 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue는 라벨 클릭 강조 방법을 구현합니다.

탐색 메뉴 표시줄 라우팅을 위한 Vue 강조 설정 방법

Vue 양방향 바인딩을 구현하는 네 가지 방법

위 내용은 Vue 네트워크에서 인터셉터를 요청하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!