实现 SecureToken 工具

分类：developer ｜ 标签：令牌、token、随机 生成高强度随机令牌

2.1 功能说明

生成高强度随机令牌

2.1.1 使用指南

功能说明

使用浏览器密码学安全随机数（crypto.getRandomValues）生成高强度随机令牌，支持 hex / base64url / 普通字符串格式与批量生成。

使用场景

API 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> 中定义的主要函数/方法：

• gen()
• copy()

2.2.3 关键实现代码

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

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

const len = ref(32)
const fmt = ref('hex')
const count = ref(1)
const out = ref([])

const STR = 'abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789'

function gen() {
  const arr = []
  for (let i = 0; i < count.value; i++) {
    const bytes = crypto.getRandomValues(new Uint8Array(len.value))
    if (fmt.value === 'hex') {
      arr.push(Array.from(bytes, b => b.toString(16).padStart(2, '0')).join(''))
    } else if (fmt.value === 'b64') {
      let s = ''
      for (const b of bytes) s += String.fromCharCode(b)
      arr.push(btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''))
    } else {
      arr.push(Array.from(bytes, b => STR[b % STR.length]).join(''))
    }
  }
  out.value = arr
}
function copy() { if (out.value.length) navigator.clipboard?.writeText(out.value.join('\n')) }

2.3 效果截图

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