Bagaimana untuk melaksanakan senarai putih pemintasan permintaan dalam vue

Kata Pengantar

Dalam proses membangunkan dengan Vue, kami akan menghadapi situasi di mana kami perlu memintas permintaan rangkaian, dan kami juga perlu mengecualikan beberapa permintaan daripada dipintas, iaitu, menyenarai putih. Artikel ini akan memperkenalkan kaedah pelaksanaan senarai putih pemintasan permintaan Vue.

Teks

Apabila membangun dengan Vue, kami biasanya menggunakan axios untuk menghantar permintaan rangkaian Dalam axios, kami boleh menyesuaikan pemintas permintaan rangkaian. Pemintas tersuai boleh membantu kami mengubah suai konfigurasi permintaan sebelum menghantar permintaan rangkaian, atau memproses hasil respons selepas respons permintaan.

Penggunaan asas pemintas permintaan Vue

Dalam Vue, kita perlu memasang dan memperkenalkan axios terlebih dahulu:

npm install axios -S

import axios from 'axios'

Kemudian kita boleh menetapkan aksios, Tetapkan permintaan pemintas dan pemintas respons:

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

Objek konfigurasi dalam pemintas permintaan mengandungi maklumat yang berkaitan dengan permintaan semasa Kami boleh mengubah suai objek ini dalam pemintas, seperti menambah beberapa pengepala permintaan dll.

Objek tindak balas dalam pemintas respons mengandungi maklumat pemulangan permintaan rangkaian Kami juga boleh mengubah suai objek ini, seperti menilai kod ralat, dsb.

Pelaksanaan senarai putih pemintas permintaan Vue

Dalam beberapa senario tertentu, kami tidak mahu memintas permintaan tertentu Pada masa ini, kami perlu mengubah suai pemintas permintaan untuk melaksanakan fungsi senarai putih.

Dalam pemintas permintaan, kami boleh memutuskan sama ada untuk memintas permintaan semasa dengan menilai sama ada URL permintaan semasa berada dalam senarai putih. Di sini kita perlu mentakrifkan senarai senarai putih dan membuat pertimbangan dalam pemintas permintaan:

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;
});

Dalam kod di atas, kami mula-mula menentukan senarai senarai putih, dan kemudian menilai permintaan semasa dalam pemintas permintaan URL dinilai, dan jika permintaan semasa tiada dalam senarai putih, pintaskannya. Dalam pemintas ini, kami turut menambahkan beberapa kod logik, seperti mendapatkan token setempat, menambahkan medan Kebenaran pada pengepala permintaan, dsb.

Dalam kod di atas, jika URL yang diminta tiada dalam senarai putih, ia akan dipintas dan operasi berikut akan dilakukan semasa pemintasan:

1. Dapatkan token setempat .
2. Tentukan sama ada token itu wujud secara setempat, dan jika tidak, lompat ke halaman log masuk.
3. Jika terdapat token, tambahkan medan Kebenaran dalam pengepala untuk menghantarnya ke hujung belakang.

Selepas menyelesaikan operasi di atas, kembalikan objek konfigurasi yang diproses dan permintaan akan terus dihantar.

Ringkasan

Aplikasi pemintas permintaan Vue adalah sangat fleksibel Dengan menyesuaikan pemintas, kami boleh mengubah suai dan memintas permintaan rangkaian pada bila-bila masa, dan pada masa yang sama merealisasikan fungsi senarai putih, yang. adalah Kecualikan permintaan tertentu daripada pemintasan. Dalam pembangunan projek sebenar, penyenaraian putih pemintasan permintaan ialah fungsi penting, jadi kita perlu belajar cara menyesuaikan pemintas pemintas permintaan untuk melaksanakan penyenaraian putih permintaan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai putih pemintasan permintaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!