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

php中世界最好的语言
풀어 주다: 2018-04-20 14:10:27
원래의
1516명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!