438 lines
12 KiB
Vue
438 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<ListPageLayout
|
|||
|
|
title="白名单管理"
|
|||
|
|
subtitle="管理您的API访问IP白名单，最多可添加10个IP地址"
|
|||
|
|
>
|
|||
|
|
<template #actions>
|
|||
|
|
<el-button type="primary" @click="showAddForm = true">
|
|||
|
|
<PlusIcon class="w-4 h-4 mr-1" />
|
|||
|
|
添加IP地址
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template #filters>
|
|||
|
|
<FilterSection>
|
|||
|
|
<FilterItem label="IP地址搜索">
|
|||
|
|
<el-input
|
|||
|
|
v-model="filters.keyword"
|
|||
|
|
placeholder="输入IP地址进行搜索"
|
|||
|
|
clearable
|
|||
|
|
@input="handleSearch"
|
|||
|
|
class="w-full"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<ComputerDesktopIcon class="w-4 h-4 text-gray-400" />
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</FilterItem>
|
|||
|
|
|
|||
|
|
<FilterItem label="状态筛选">
|
|||
|
|
<el-select
|
|||
|
|
v-model="filters.status"
|
|||
|
|
placeholder="选择状态"
|
|||
|
|
clearable
|
|||
|
|
@change="handleFilterChange"
|
|||
|
|
class="w-full"
|
|||
|
|
>
|
|||
|
|
<el-option label="全部" value="" />
|
|||
|
|
<el-option label="已添加" value="active" />
|
|||
|
|
<el-option label="待添加" value="pending" />
|
|||
|
|
</el-select>
|
|||
|
|
</FilterItem>
|
|||
|
|
|
|||
|
|
<template #stats>
|
|||
|
|
共找到 {{ whiteListData.length }}/10 个IP地址
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template #buttons>
|
|||
|
|
<el-button @click="resetFilters">重置筛选</el-button>
|
|||
|
|
<el-button type="primary" @click="loadWhiteList">应用筛选</el-button>
|
|||
|
|
</template>
|
|||
|
|
</FilterSection>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template #table>
|
|||
|
|
<div v-if="loading" class="flex justify-center items-center py-12">
|
|||
|
|
<el-loading size="large" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else-if="whiteListData.length === 0" class="text-center py-12">
|
|||
|
|
<el-empty description="暂无白名单IP地址">
|
|||
|
|
<template #image>
|
|||
|
|
<ShieldCheckIcon class="w-16 h-16 text-gray-400" />
|
|||
|
|
</template>
|
|||
|
|
<p class="text-gray-500 mt-2">添加IP地址到白名单以允许API访问</p>
|
|||
|
|
<el-button type="primary" @click="showAddForm = true" class="mt-4">
|
|||
|
|
<PlusIcon class="w-4 h-4 mr-1" />
|
|||
|
|
添加第一个IP地址
|
|||
|
|
</el-button>
|
|||
|
|
</el-empty>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else class="white-list-table">
|
|||
|
|
<el-table :data="whiteListData" stripe>
|
|||
|
|
<el-table-column prop="ip_address" label="IP地址" min-width="200">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
|
|||
|
|
<span class="font-mono text-sm">{{ row.ip_address }}</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column prop="created_at" label="添加时间" min-width="180">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
|
|||
|
|
<span class="text-sm">{{ formatDate(row.created_at) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column label="状态" width="120">
|
|||
|
|
<template #default>
|
|||
|
|
<el-tag type="success" size="small">
|
|||
|
|
<span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
|
|||
|
|
</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column label="操作" width="120" fixed="right">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
size="small"
|
|||
|
|
@click="handleDeleteIP(row.ip_address)"
|
|||
|
|
:loading="deleteLoading === row.ip_address"
|
|||
|
|
>
|
|||
|
|
<TrashIcon class="w-3 h-3 mr-1" />
|
|||
|
|
删除
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template #extra>
|
|||
|
|
<!-- 添加IP地址弹窗 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="showAddForm"
|
|||
|
|
title="添加IP地址"
|
|||
|
|
width="500px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<el-form
|
|||
|
|
ref="addFormRef"
|
|||
|
|
:model="addForm"
|
|||
|
|
:rules="addFormRules"
|
|||
|
|
label-width="100px"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="IP地址" prop="ipAddress">
|
|||
|
|
<el-input
|
|||
|
|
v-model="addForm.ipAddress"
|
|||
|
|
placeholder="请输入IP地址，如：192.168.1.1"
|
|||
|
|
:disabled="whiteListData.length >= 10"
|
|||
|
|
>
|
|||
|
|
<template #prefix>
|
|||
|
|
<ComputerDesktopIcon class="w-4 h-4 text-gray-400" />
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item v-if="whiteListData.length >= 10">
|
|||
|
|
<el-alert
|
|||
|
|
title="白名单已满"
|
|||
|
|
type="warning"
|
|||
|
|
:closable="false"
|
|||
|
|
show-icon
|
|||
|
|
>
|
|||
|
|
<template #default>
|
|||
|
|
<p>您已达到白名单数量上限（10个），请先删除不需要的IP地址后再添加新的。</p>
|
|||
|
|
</template>
|
|||
|
|
</el-alert>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="flex justify-end gap-2">
|
|||
|
|
<el-button @click="showAddForm = false">取消</el-button>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
@click="handleAddIP"
|
|||
|
|
:loading="addLoading"
|
|||
|
|
:disabled="whiteListData.length >= 10"
|
|||
|
|
>
|
|||
|
|
添加
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 使用说明卡片 -->
|
|||
|
|
<div class="mt-6">
|
|||
|
|
<el-card class="help-card">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="flex items-center">
|
|||
|
|
<QuestionMarkCircleIcon class="w-5 h-5 mr-2 text-orange-600" />
|
|||
|
|
<span class="text-lg font-semibold">使用说明</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<div class="help-content">
|
|||
|
|
<div class="help-item">
|
|||
|
|
<h4 class="help-title">什么是白名单？</h4>
|
|||
|
|
<p class="help-text">
|
|||
|
|
白名单是API访问的安全机制，只有添加到白名单中的IP地址才能调用您的API接口。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="help-item">
|
|||
|
|
<h4 class="help-title">如何添加IP地址？</h4>
|
|||
|
|
<p class="help-text">
|
|||
|
|
点击"添加IP地址"按钮，在弹窗中输入有效的IP地址（支持IPv4格式），点击"添加"即可。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="help-item">
|
|||
|
|
<h4 class="help-title">数量限制</h4>
|
|||
|
|
<p class="help-text">
|
|||
|
|
每个用户最多可添加10个IP地址到白名单中，超出限制需要先删除不需要的IP地址。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="help-item">
|
|||
|
|
<h4 class="help-title">安全提醒</h4>
|
|||
|
|
<p class="help-text">
|
|||
|
|
请确保只添加您信任的IP地址，避免将API访问权限泄露给未授权的服务器。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ListPageLayout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { whiteListApi } from '@/api'
|
|||
|
|
import FilterItem from '@/components/common/FilterItem.vue'
|
|||
|
|
import FilterSection from '@/components/common/FilterSection.vue'
|
|||
|
|
import ListPageLayout from '@/components/common/ListPageLayout.vue'
|
|||
|
|
import { useCertification } from '@/composables/useCertification'
|
|||
|
|
import {
|
|||
|
|
CalendarIcon,
|
|||
|
|
ComputerDesktopIcon,
|
|||
|
|
PlusIcon,
|
|||
|
|
QuestionMarkCircleIcon,
|
|||
|
|
ShieldCheckIcon,
|
|||
|
|
TrashIcon
|
|||
|
|
} from '@heroicons/vue/24/outline'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
|
|||
|
|
// 认证相关
|
|||
|
|
const {
|
|||
|
|
isCertified,
|
|||
|
|
certificationLoading,
|
|||
|
|
requiresCertification,
|
|||
|
|
callProtectedAPI,
|
|||
|
|
canCallAPI
|
|||
|
|
} = useCertification()
|
|||
|
|
|
|||
|
|
// 响应式数据
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const addLoading = ref(false)
|
|||
|
|
const deleteLoading = ref('')
|
|||
|
|
const whiteListData = ref([])
|
|||
|
|
const addFormRef = ref()
|
|||
|
|
const showAddForm = ref(false)
|
|||
|
|
|
|||
|
|
// 表单数据
|
|||
|
|
const addForm = reactive({
|
|||
|
|
ipAddress: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 筛选条件
|
|||
|
|
const filters = reactive({
|
|||
|
|
keyword: '',
|
|||
|
|
status: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 表单验证规则
|
|||
|
|
const addFormRules = {
|
|||
|
|
ipAddress: [
|
|||
|
|
{ required: true, message: '请输入IP地址', trigger: 'blur' },
|
|||
|
|
{
|
|||
|
|
pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
|
|||
|
|
message: '请输入有效的IPv4地址格式',
|
|||
|
|
trigger: 'blur'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 搜索防抖
|
|||
|
|
let searchTimer = null
|
|||
|
|
|
|||
|
|
// 页面加载时获取数据
|
|||
|
|
onMounted(() => {
|
|||
|
|
loadWhiteList()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取白名单列表
|
|||
|
|
const loadWhiteList = async () => {
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const response = await callProtectedAPI(whiteListApi.getWhiteList)
|
|||
|
|
if (response) {
|
|||
|
|
whiteListData.value = response.data.items || []
|
|||
|
|
} else {
|
|||
|
|
// 如果API调用被阻止，显示空数据
|
|||
|
|
whiteListData.value = []
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取白名单失败:', error)
|
|||
|
|
if (canCallAPI.value) {
|
|||
|
|
ElMessage.error('获取白名单失败')
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加IP地址
|
|||
|
|
const handleAddIP = async () => {
|
|||
|
|
if (!addFormRef.value) return
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await addFormRef.value.validate()
|
|||
|
|
} catch (error) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (whiteListData.value.length >= 10) {
|
|||
|
|
ElMessage.warning('白名单已满，请先删除不需要的IP地址')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
addLoading.value = true
|
|||
|
|
try {
|
|||
|
|
const response = await callProtectedAPI(whiteListApi.addWhiteListIP, addForm.ipAddress)
|
|||
|
|
if (response) {
|
|||
|
|
ElMessage.success('添加IP地址成功')
|
|||
|
|
addForm.ipAddress = ''
|
|||
|
|
showAddForm.value = false
|
|||
|
|
await loadWhiteList()
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('添加IP地址失败:', error)
|
|||
|
|
if (canCallAPI.value) {
|
|||
|
|
ElMessage.error(error.response?.data?.message || '添加IP地址失败')
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
addLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除IP地址
|
|||
|
|
const handleDeleteIP = async (ipAddress) => {
|
|||
|
|
try {
|
|||
|
|
await ElMessageBox.confirm(
|
|||
|
|
`确定要删除IP地址 "${ipAddress}" 吗？`,
|
|||
|
|
'确认删除',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
} catch {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
deleteLoading.value = ipAddress
|
|||
|
|
try {
|
|||
|
|
const response = await callProtectedAPI(whiteListApi.deleteWhiteListIP, ipAddress)
|
|||
|
|
if (response) {
|
|||
|
|
ElMessage.success('删除IP地址成功')
|
|||
|
|
await loadWhiteList()
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('删除IP地址失败:', error)
|
|||
|
|
if (canCallAPI.value) {
|
|||
|
|
ElMessage.error(error.response?.data?.message || '删除IP地址失败')
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
deleteLoading.value = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理筛选变化
|
|||
|
|
const handleFilterChange = () => {
|
|||
|
|
loadWhiteList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理搜索
|
|||
|
|
const handleSearch = () => {
|
|||
|
|
if (searchTimer) {
|
|||
|
|
clearTimeout(searchTimer)
|
|||
|
|
}
|
|||
|
|
searchTimer = setTimeout(() => {
|
|||
|
|
loadWhiteList()
|
|||
|
|
}, 500)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置筛选
|
|||
|
|
const resetFilters = () => {
|
|||
|
|
filters.keyword = ''
|
|||
|
|
filters.status = ''
|
|||
|
|
loadWhiteList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化日期
|
|||
|
|
const formatDate = (dateString) => {
|
|||
|
|
if (!dateString) return '-'
|
|||
|
|
const date = new Date(dateString)
|
|||
|
|
return date.toLocaleString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.help-content {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-item {
|
|||
|
|
padding: 16px;
|
|||
|
|
border-left: 4px solid #409eff;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-text {
|
|||
|
|
color: #606266;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.help-content {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|