vuejs에서 차단을 요청하는 방법

Vuejs 요청 차단 방법: 1. src 폴더 아래에 utils 폴더를 만듭니다. 2. 폴더 아래에 request.js 및 auth.js 파일을 만듭니다. 3. axios를 다운로드합니다. 4. 요청 차단을 구현합니다.

이 기사의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs는 어떻게 차단을 요청하나요?

vue 데이터 요청 차단을 위한 특정 코드

src 폴더 아래에 utils 폴더를 생성하세요

동시에 request.js와 auth.js를 생성하세요

request.js 폴더 아래 파일은 요청 차단 및 요청 데이터 캡슐화를 위한 주요 입구입니다.
auth.js는 토큰 설정, 토큰 삭제 및 사용자 로그인 여부 확인을 위한 주요 입구입니다.

auth.js( 캡슐화 토큰)

export function isLogin() {
  if (localStorage.getItem('token')) {
   return true;
  } else {
   return false;
  }
 }
 export function getToken() {
  return localStorage.getItem('token');
 }
 export function setToken(token) {
  localStorage.setItem('token', token);
 }
 
 export function removeToken() {
  localStorage.removeItem('token');
 }

axios 다운로드(명령: npm install axios --save-dev) 및 axios 소개, getToken

import axios from 'axios';
import { getToken } from './auth';

인스턴스 생성: 두 개의 매개변수 전달(timeout(타임아웃 시간), baseUrl(서버 경로))

const instance = axios.create({
   timeout: 5000,
   baseURL: 'https://xxxxxxxxx/xxxx/',
 });

요청 차단

// 请求拦截
 instance.interceptors.request.use(
  function(config) {
   // eslint-disable-next-line prettier/prettier
   config.headers.authorization = 'Bearer ' + getToken();
   return config;
  },
  function(error) {
   // Do something with request error
   return Promise.reject(error);
  }
 );
 
 instance.interceptors.response.use(
  response => {
   return response;
  },
  error => {
   if (error.response.status == 401) {
    window.location.href = '/#/login';
   }
   if (error.response.status == 404) {
    window.location.href = '/404.html';
   }
   return Promise.reject(error.response.data);
  }
 );

요청 캡슐화

 /**
  * 获取数据 get请求
  * @param {*} url
  * @param {*} config
  */
 export const get = (url, config) => instance.get(url, config);
 
 /**
  * post请求
  * @param {*} url
  * @param {*} data
  * @param {*} config
  */
 export const post = (url, data) => instance.post(url, data);
 /**
  * put
  * @param {*} url
  * @param {*} data
  * @param {*} config
  */
 export const put = (url, data, config) => instance.put(url, data, config);
 
 /**
  * delete
  * @param {*} url
  * @param {*} config
  */
 export const remove = (url, config) => instance.delete(url, config);

권장 학습: "vue tutorial"

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