vue怎麼實作請求攔截白名單

前言

在使用 Vue 進行開發的過程中，我們會遇到需要對網路請求進行攔截的情況，並且還需要排除一些請求不受攔截，即白名單。這篇文章將介紹 Vue 請求攔截白名單實現的方法。

正文

在使用 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;
});

請求攔截器中的config 物件包含了目前請求的相關訊息，我們可以在攔截器中對這個物件進行修改，例如添加一些請求頭訊息等。

回應攔截器中的 response 物件包含了網路請求的回傳訊息，我們同樣可以對這個物件進行修改，例如對錯誤碼進行判斷等等。

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進行判斷，如果目前請求不在白名單之中，進行攔截。在這個攔截器中，我們也加入了一些邏輯程式碼，例如取得本機的 token，再在請求頭中加入 Authorization 欄位等等。

在上述程式碼中，如果要求的 URL 不在白名單清單中，則會進行攔截，並在攔截中進行瞭如下操作：

1. 取得本機的 token。
2. 判斷本機是否存有 token，如果沒有則跳到登入頁。
3. 如果有 token，則在 headers 中新增 Authorization 欄位以將其傳遞到後端。

完成上述操作後，再將處理完畢的 config 物件傳回，請求就會繼續被傳送。

總結

Vue 請求攔截器的應用十分靈活，透過自訂攔截器，我們可以隨時對網路請求進行修改、攔截等操作，同時實現了白名單的功能，即對某些請求進行排除，使其不受攔截的干擾。在實際專案開發中，請求攔截白名單是必不可少的功能，因此我們需要學會如何自訂請求攔截攔截器，來實現請求白名單。

以上是vue怎麼實作請求攔截白名單的詳細內容。更多資訊請關注PHP中文網其他相關文章！