实现 BasicAuth 工具

分类：developer ｜ 标签：Basic、Auth、鉴权 生成/解析 Basic Auth 请求头

2.1 功能说明

生成/解析 Basic Auth 请求头

2.1.1 使用指南

功能说明

将用户名与密码按 user:pass 拼接后做 Base64，生成 Authorization: Basic <token> 请求头；也可反向解析。

使用场景

调试受保护接口、文档示例、本地鉴权联调。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• b64()
• gen()
• parse()
• copyHeader()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const mode = ref('gen')
const user = ref('')
const pass = ref('')
const header = ref('')
const token = ref('')
const parsed = ref(null)
const error = ref('')

function b64(s) { return btoa(unescape(encodeURIComponent(s))) }

function gen() {
  if (!user.value && !pass.value) { header.value = ''; return }
  const raw = user.value + ':' + pass.value
  const b = b64(raw)
  header.value = 'Authorization: Basic ' + b
}
function parse() {
  error.value = parsed.value = null
  let t = token.value.trim()
  if (!t) { error.value = '请输入 token'; return }
  if (t.startsWith('Basic ')) t = t.slice(6).trim()
  else if (t.startsWith('Authorization:')) t = t.split(':').slice(1).join(':').trim()
  let s
  try { s = decodeURIComponent(escape(atob(t))) } catch { error.value = 'Base64 解析失败'; return }
  const i = s.indexOf(':')
  parsed.value = { user: i < 0 ? s : s.slice(0, i), pass: i < 0 ? '' : s.slice(i + 1) }
}
function copyHeader() { if (header.value) navigator.clipboard?.writeText(header.value) }

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/basic-auth