vue+axios가 로그인 요청을 차단합니다.

이번에는 vue+axios로 로그인 요청을 가로채는 방법을 알려드리겠습니다. vue+axios로 가로채는 로그인 요청의 주의사항은 무엇인가요?

로그인 시간 초과를 판단하는 등 인터페이스를 요청할 때 인터페이스는 일반적으로 특정 오류 코드를 반환합니다. 그런 다음 시간이 많이 걸리고 노동 집약적인 각 인터페이스를 판단하면 인터셉터를 사용하여 이를 수행할 수 있습니다. 차단을 요청합니다.

1. axios 설치 및 구성

cnpm install --save axios 

이 통합 처리를 수행하기 위해 js 파일을 생성하고 다음과 같이 새로운 axios.js를 생성할 수 있습니다.

import axios from 'axios' 
import { Indicator } from 'mint-ui'; 
import { Toast } from 'mint-ui'; 
// http request 拦截器 
axios.interceptors.request.use( 
  config => { 
    Indicator.open() 
    return config; 
  }, 
  err => { 
    Indicator.close() 
    return Promise.reject(err); 
  }); 
// http response 拦截器 
axios.interceptors.response.use( 
  response => { 
    Indicator.close() 
    return response; 
  }, 
  error => { 
    Indicator.close() 
  }); 
export default axios

그런 다음 이 js 파일을 main.js에 도입합니다.

import axios from './axio'; 
Vue.prototype.$axios = axios;

이런 식으로 axios를 사용해 요청할 수 있고, this.axios를 사용해 컴포넌트에서 호출할 수 있습니다.

this.$axios({ 
    url:requestUrl+'homePage/v1/indexNewPropertiesResult', 
    method:'POST', 
   }).then(function(response){ //接口返回数据 
    console.log(response) 
    that.modulesArr=response.data.data.modules; 
//   that.getRecommendGoods(0); 
   });

axios를 사용해 인터페이스를 요청해야만 이제 axios에서 가로챌 수 있습니다.

에서 필요한 작업을 수행하세요. 추가됨:

axios는 인터셉터를 사용하여 모든 http 요청을 균일하게 처리합니다.

axios는 요청 전에 인터셉터를 사용합니다

또는 응답이 처리되거나 차단됩니다.

•http 요청 인터셉터

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });

•http 응답 인터셉터

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
 }, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
 });

•리셉터 제거

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

•사용자 정의 Axios 인스턴스용 인터셉터 추가

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

이 글을 읽으신 것 같습니다. 사례 방법에 대한 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

환경별 Vue 프로젝트 패키징 단계에 대한 자세한 설명

Angular2 사용 시 Dom 오해 방지

위 내용은 vue+axios가 로그인 요청을 차단합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!