Vue에서 Axios 요청 차단을 사용하는 방법 소개

이 글은 Vue에서 Axios 요청 차단을 사용하는 방법을 소개합니다. 참고할 만한 가치가 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.

1. 소개

Axios의 기본 사용법은 너무 많이 설명하지 않겠습니다. 사용 방법은 Axios 문서 지침·Axios 중국어 지침

여기서 Axios 가로채기 사용법을 공유하겠습니다. 실제 프로젝트

많은 사람들은 axios의 공식 문서에서 인터셉터 열을 본 적이 있을 것입니다. 문서에서는 이것이 존재한다는 것만 알려주고 어떤 상황에서 사용되는지는 알려주지 않기 때문에 약간 혼란스러울 수도 있습니다. 결국 많은 초보자들이 axios 인터셉터 사용을 포기하게 되지만, 인터셉터를 사용하면 페이지에서 불필요한 코드가 많이 줄어들게 됩니다.

2. 이전

프로젝트에서 사용된 UI 프레임워크는 iview

다음의 친절한 팁은 모두 this.$Message.xxx
/api/request와 같은 iview ui의 메시지 프롬프트 구성 요소를 사용하는 것입니다. 인터페이스, 실제 개발 백엔드에서 제공하는 인터페이스를 사용합니다.
code는 배경 상태 코드입니다. 여기서는 예시를 들었습니다. 내 반환 코드가 귀하의 코드와 다른 이유는 묻지 마세요. 이 모든 내용은 배경과 전달되고 동의되어야 합니다.
사용된 요청 헤더는 다음과 같습니다: axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; 이 요청 헤더가 사용되는 이유에 대해서는 두 개의 요청을 보내는 axios에 대한 다른 기사를 읽을 수 있습니다. 이 요청 헤더가 사용되기 때문에 OPTIONS 요청 문제가 있습니다. qs 모듈을 사용하려면 그렇지 않으면 백엔드가 이 데이터를 인식하지 못합니다.

3. 요청 차단을 사용하지 않음

요청 차단을 사용하지 않는 경우에도 가능하지만 로그인 페이지를 예로 들어보겠습니다.

간단한 페이지, |Ω・)

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理，状态为10时为登录超时
    if(data.data.code === 10){
        this.$Message.error("登录已超时，请重新登录")
        this.$router.push("/login")
    //其余错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

요청 차단을 사용하지 않는 경우에는 각 요청과 각 상태를 특별하게 처리해야 합니다. 요청 10의 경우 각 페이지에는 많은 요청이 있으므로 페이지가 매우 길고 비대해지고 유지 관리가 어려워집니다.

3. 요청 차단 사용

동일한 요청 반환 코드를 추출하여 요청 차단에 작성할 수 있습니다.

차단을 설정한 후 구성 요소 코드가 많이 단순화될 수 있습니다. 로그인 인터페이스를 예로 들어 보겠습니다.

main.js에서

//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {

  //这个例子中data是loginName和password
  let REQUEST_DATA = request.data
  //统一进行qs模块转换
  request.data = qs.stringify(REQUEST_DATA)
  //再发送给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
  //特殊错误处理，状态为10时为登录超时
  if (response.data.code === 10) {
    iView.Message.error("登录已超时，请重新登录");
    router.push("/login")
  //其余错误状态处理    
  } else if (response.data.code != 0) {
    iView.Message.error(response.data.msg)
  //请求成功
  } else if(response.data.code === 0){
    //将我们请求到的信息返回页面中请求的逻辑
    return response;
  }
 //......

}, function (error) {
  return Promise.reject(error);
});

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

이런 식으로 axios 요청에 가로채기를 추가하여 코드 로직을 많이 줄이고 페이지를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다.

기타

이것이 가장 많습니다. Axios 차단의 기본 사용법은 물론, 이를 확장하고 더 많은 작업을 수행할 수도 있습니다. 도구는 죽은 사람이 살아 있다는 것입니다. 요청 서명 설정과 같은 또 다른 작은 예를 들 수 있습니다.

요청 서명은 프런트엔드와 백엔드 간에 합의된 통신 방법입니다. 데이터를 암호화하면 어느 정도 데이터의 보안이 보장됩니다.

이 로그인 페이지를 예로 들어보겠습니다.

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

httpRequest 데이터 정보를 보냅니다. to 백그라운드 이전에 데이터에 서명하고 암호화합니다

main.js
에서 전송된 데이터를 가로챕니다

//请求发送拦截
axios.interceptors.request.use((request) => {

  //获取请求的数据，这里是loginName和password
  let REQUEST_DATA = request.data
  //获取请求的地址，这里是/api/request
  let REQUEST_URL = request.url
   
  //设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
  request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
  //发送请求给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//已封装好的签名函数
function requestDataFn(data, method) {

  let postData = {}

  //时间戳，时间戳函数不作展示，也是已封装好的
  postData.timestamp = getNowFormatDate();

  //请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
  postData.session = localStorage.getItem('session') || '';
  postData.secretKey = localStorage.getItem('secretKey') || '';
  
  //请求的地址，这里是/api/request
  postData.method = method;
    
  //请求的数据这里是loginName和password，进行base64加密
  let base64Data = Base64.encode(JSON.stringify(data));
   
  //设置签名并进行md5加密
  let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
   
  //把数据再次进行加密
  postData.data = encodeURI(base64Data);

  postData.signature = signature;
   
  return postData
}

이런 식으로 데이터 암호화 및 서명을 완료한 후 백그라운드로 보냅니다.

참고: 이는 서명이 필요한 경우에만 예시로 표시됩니다. 서명 방법은 프런트 데스크와 백엔드 간의 통신 결과입니다.

Axios 요청 차단의 사용은 이보다 훨씬 더 중요합니다. 실제로 이를 사용하려면 실제 프로젝트에서 변경 사항에 적응해야 합니다.

위 내용은 Vue에서 Axios 요청 차단을 사용하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!