Vue에서 요청 차단 허용 목록을 구현하는 방법

머리말

Vue로 개발하는 과정에서 네트워크 요청을 가로채야 하는 상황에 직면하게 되며, 가로채기에서 일부 요청을 제외해야 하는 경우, 즉 화이트리스트를 작성해야 하는 경우도 있습니다. 이 기사에서는 Vue 요청 차단 화이트리스트 구현 방법을 소개합니다.

Text

Vue로 개발할 때 일반적으로 axios를 사용하여 네트워크 요청을 보냅니다. axios에서는 네트워크 요청의 인터셉터를 사용자 정의할 수 있습니다. 사용자 정의 인터셉터는 네트워크 요청을 보내기 전에 요청 구성을 수정하거나 요청 응답 후 응답 결과를 처리하는 데 도움이 될 수 있습니다.

Vue 요청 인터셉터의 기본 사용법

Vue에서는 먼저 axios를 설치하고 도입해야 합니다:

npm install axios -S

import axios from 'axios'

그런 다음 axios를 설정하고 요청 인터셉터와 응답 인터셉터를 설정할 수 있습니다.

axios.interceptors.request.use(
  config => {
    // 在请求发送之前做一些事情
    return config;
  },
  error => {
    // 处理请求错误时做一些事情
    return error;
});
 
axios.interceptors.response.use(
  response => {
    // 处理响应数据做一些事情
    return response;
  },
  error => {
    // 处理响应错误做一些事情
    return error;
});

요청 인터셉터에서 구성 객체 현재 요청과 관련된 정보가 포함되어 있습니다. 요청 헤더 정보를 추가하는 등 인터셉터에서 이 객체를 수정할 수 있습니다.

응답 인터셉터의 응답 개체에는 네트워크 요청의 반환 정보가 포함되어 있으며 오류 코드 판단 등 이 개체를 수정할 수도 있습니다.

Vue 요청 차단 화이트리스트 구현

일부 특정 시나리오에서는 특정 요청을 가로채기를 원하지 않습니다. 이때 화이트리스트 기능을 구현하려면 요청 인터셉터를 수정해야 합니다.

요청 인터셉터에서는 현재 요청의 URL이 화이트리스트에 있는지 판단하여 현재 요청을 차단할지 여부를 결정할 수 있습니다. 여기서는 화이트리스트 목록을 정의하고 요청 인터셉터에서 판단해야 합니다.

const whitelist = ['/login', '/register']; // 定义白名单
axios.interceptors.request.use(
  config => {
    // 在请求发送之前做一些事情
    if (whitelist.indexOf(config.url) === -1) { // 当前请求不在白名单之中，进行拦截
      const token = localStorage.getItem('token');
      if (token) {
        config.headers.Authorization = token;
      } else {
        window.location.href = '/login';
      }
    }
    return config;
  },
  error => {
    // 处理请求错误时做一些事情
    return error;
});

위 코드에서는 먼저 화이트리스트 목록을 정의한 다음 요청 인터셉터에서 현재 요청된 URL을 판단합니다. 화이트리스트에 포함되어 차단됩니다. 이 인터셉터에서는 로컬 토큰 획득, 요청 헤더에 Authorization 필드 추가 등과 같은 일부 논리 코드도 추가했습니다.

위 코드에서 요청한 URL이 화이트리스트에 없으면 차단되며 차단 중에 다음 작업이 수행됩니다.

1. 로컬 토큰을 가져옵니다.
2. 토큰이 로컬에 존재하는지 확인하고, 존재하지 않으면 로그인 페이지로 이동하세요.
3. 토큰이 있는 경우 헤더에 Authorization 필드를 추가하여 백엔드에 전달하세요.

위 작업을 완료한 후 처리된 구성 개체를 반환하면 요청이 계속 전송됩니다.

요약

Vue 요청 인터셉터의 적용은 매우 유연합니다. 인터셉터를 사용자 정의하면 언제든지 네트워크 요청을 수정하고 차단할 수 있으며 동시에 화이트리스트 기능을 실현할 수 있습니다. 차단의 영향을 받지 않습니다. 실제 프로젝트 개발에서 요청 차단 화이트리스트는 필수 기능이므로 요청 화이트리스트를 구현하기 위해 요청 차단 인터셉터를 사용자 정의하는 방법을 배워야 합니다.

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