이번에는 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 프로젝트 패키징 단계에 대한 자세한 설명
위 내용은 vue+axios가 로그인 요청을 차단합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!