前言
在使用 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 不在白名单列表中，则会进行拦截，并在拦截中进行了如下操作：
- 获取本地的 token。
- 判断本地是否存有 token，如果没有则跳转至登录页。
- 如果有 token，则在 headers 中添加 Authorization 字段以将其传递到后端。
完成上述操作后，再将处理完毕的 config 对象返回，请求就会继续被发送。
总结
Vue 请求拦截器的应用十分灵活，通过自定义拦截器，我们可以随时对网络请求进行修改、拦截等操作，同时实现了白名单的功能，即对某些请求进行排除，使其不受到拦截的干扰。在实际项目开发中，请求拦截白名单是必不可少的功能，因此我们需要学会如何自定义请求拦截拦截器，来实现请求白名单。
