feat: add interactive demos for AI history, Auth design, and Git intro
This commit is contained in:
sanbuphy
@@ -1,457 +1,266 @@
|
||||
<!--
|
||||
AuthBasicsDemo.vue
|
||||
鉴权基础概念演示
|
||||
鉴权基础：你到底在“传什么”来证明身份？
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-basics-demo">
|
||||
<div class="header">
|
||||
<div class="title">为什么要鉴权？</div>
|
||||
<div class="subtitle">理解系统安全的第一道防线</div>
|
||||
<div class="title">🧰 鉴权的 4 种常见“凭证”</div>
|
||||
<div class="subtitle">
|
||||
选一个方案，看看请求长什么样、优缺点是什么、最常见坑是什么。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="building-metaphor">
|
||||
<div class="building">
|
||||
<div class="building-header">
|
||||
<div class="building-icon">🏢</div>
|
||||
<div class="building-text">后端系统 = 一栋大楼</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<button
|
||||
v-for="m in methods"
|
||||
:key="m.id"
|
||||
class="tab"
|
||||
:class="{ active: current === m.id }"
|
||||
@click="current = m.id"
|
||||
>
|
||||
{{ m.name }}
|
||||
<span class="tag">{{ m.bestFor }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="building-areas">
|
||||
<div
|
||||
v-for="area in areas"
|
||||
:key="area.key"
|
||||
class="area"
|
||||
:class="{
|
||||
protected: area.protected,
|
||||
'can-access': canAccess(area)
|
||||
}"
|
||||
@click="toggleProtection(area)"
|
||||
>
|
||||
<div class="area-icon">{{ area.icon }}</div>
|
||||
<div class="area-label">{{ area.label }}</div>
|
||||
<div class="area-status" v-if="area.protected">
|
||||
<div class="lock-icon">🔒</div>
|
||||
<div class="lock-text">需要{{ area.requiredRole }}</div>
|
||||
</div>
|
||||
<div class="area-access" v-if="canAccess(area)">
|
||||
<div class="access-icon">✅</div>
|
||||
<div class="access-text">可访问</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">请求长什么样</div>
|
||||
<pre class="code"><code>{{ active.example }}</code></pre>
|
||||
<div class="hint">{{ active.note }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">什么时候用 / 不用</div>
|
||||
<div class="two">
|
||||
<div class="box">
|
||||
<div class="box-title">✅ 适合</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.pros" :key="i">{{ x }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">⚠️ 不适合 / 风险</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.cons" :key="i">{{ x }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-control">
|
||||
<div class="control-title">当前用户角色</div>
|
||||
<div class="role-selector">
|
||||
<button
|
||||
v-for="role in roles"
|
||||
:key="role.key"
|
||||
class="role-btn"
|
||||
:class="{ active: currentRole === role.key }"
|
||||
@click="setRole(role.key)"
|
||||
>
|
||||
<span class="role-icon">{{ role.icon }}</span>
|
||||
<span class="role-name">{{ role.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scenarios">
|
||||
<div class="section-title">保护资源的理由</div>
|
||||
<div class="scenario-cards">
|
||||
<div
|
||||
v-for="scenario in scenarios"
|
||||
:key="scenario.key"
|
||||
class="scenario-card"
|
||||
:class="`scenario-${scenario.key}`"
|
||||
>
|
||||
<div class="scenario-icon">{{ scenario.icon }}</div>
|
||||
<div class="scenario-title">{{ scenario.title }}</div>
|
||||
<div class="scenario-desc">{{ scenario.description }}</div>
|
||||
<div class="scenario-example">{{ scenario.example }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-point">
|
||||
<div class="key-point-icon">💡</div>
|
||||
<div class="key-point-text">
|
||||
<strong>关键点：</strong
|
||||
>鉴权是第一道防线，所有敏感操作都必须先验证身份。
|
||||
没有鉴权的系统就像没有门禁的大楼，任何人都可以进出。
|
||||
<div class="card">
|
||||
<div class="card-title">一句话口诀</div>
|
||||
<div class="desc">
|
||||
<strong>先认证（你是谁）</strong
|
||||
>，再授权（你能做什么）。凭证只是“证明身份的方式”，授权永远要在服务端执行。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const currentRole = ref('guest')
|
||||
const methods = [
|
||||
{
|
||||
id: 'basic',
|
||||
name: 'HTTP Basic',
|
||||
bestFor: '内部工具',
|
||||
example: `GET /api/profile
|
||||
Authorization: Basic <base64(username:password)>`,
|
||||
note: 'Base64 不是加密；必须配合 HTTPS，且不建议用于公网生产。',
|
||||
pros: ['最简单，所有客户端都支持', '适合内部/临时调试工具'],
|
||||
cons: [
|
||||
'每次请求都带密码（风险大）',
|
||||
'无法“注销”（除非服务端改密码）',
|
||||
'不适合现代业务'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'cookie',
|
||||
name: 'Session + Cookie',
|
||||
bestFor: '传统 Web',
|
||||
example: `POST /login
|
||||
→ 200 OK
|
||||
Set-Cookie: session_id=abc; HttpOnly; Secure; SameSite=Lax
|
||||
|
||||
const roles = [
|
||||
{ key: 'guest', name: '访客', icon: '👤' },
|
||||
{ key: 'user', name: '普通用户', icon: '👤' },
|
||||
{ key: 'vip', name: 'VIP 用户', icon: '⭐' },
|
||||
{ key: 'admin', name: '管理员', icon: '👨💼' }
|
||||
]
|
||||
GET /api/profile
|
||||
Cookie: session_id=abc`,
|
||||
note: '浏览器会自动带 Cookie；因此一定要做 CSRF 防护（SameSite / CSRF Token）。',
|
||||
pros: ['服务端可控（可主动注销）', '适合 SSR/同域 Web', '实现直观'],
|
||||
cons: ['服务端有状态（需要共享 session）', '跨域复杂', '容易被 CSRF 影响']
|
||||
},
|
||||
{
|
||||
id: 'jwt',
|
||||
name: 'JWT Bearer',
|
||||
bestFor: 'API/移动端',
|
||||
example: `POST /login
|
||||
→ { "access_token": "..." }
|
||||
|
||||
const areas = ref([
|
||||
{
|
||||
key: 'lobby',
|
||||
label: '大厅',
|
||||
icon: '🚪',
|
||||
protected: false,
|
||||
requiredRole: null
|
||||
GET /api/profile
|
||||
Authorization: Bearer <access_token>`,
|
||||
note: 'JWT payload 可解码；不要放敏感信息。建议短 access token + refresh token。',
|
||||
pros: ['无状态，易扩展', '跨域友好', '移动端/多服务常用'],
|
||||
cons: [
|
||||
'难以全局注销（需要额外机制）',
|
||||
'token 变大，每次都要带',
|
||||
'设计不好会导致权限失控'
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'profile',
|
||||
label: '个人资料',
|
||||
icon: '👤',
|
||||
protected: true,
|
||||
requiredRole: '登录'
|
||||
},
|
||||
{
|
||||
key: 'vip-lounge',
|
||||
label: 'VIP 休息室',
|
||||
icon: '⭐',
|
||||
protected: true,
|
||||
requiredRole: 'VIP'
|
||||
},
|
||||
{
|
||||
key: 'admin-room',
|
||||
label: '管理员办公室',
|
||||
icon: '👨💼',
|
||||
protected: true,
|
||||
requiredRole: '管理员'
|
||||
}
|
||||
])
|
||||
|
||||
const scenarios = [
|
||||
{
|
||||
key: 'privacy',
|
||||
icon: '🔐',
|
||||
title: '隐私保护',
|
||||
description: '个人信息、聊天记录只能本人查看',
|
||||
example: '你的微信聊天记录，别人不能看'
|
||||
},
|
||||
{
|
||||
key: 'permission',
|
||||
icon: '🛡️',
|
||||
title: '权限控制',
|
||||
description: '不同角色有不同的操作权限',
|
||||
example: '管理员可以删除用户，普通用户不行'
|
||||
},
|
||||
{
|
||||
key: 'abuse',
|
||||
icon: '🚫',
|
||||
title: '防止滥用',
|
||||
description: '防止恶意调用、刷接口、爬虫',
|
||||
example: '限制 API 调用频率，防止服务被攻击'
|
||||
id: 'apikey',
|
||||
name: 'API Key',
|
||||
bestFor: '服务到服务',
|
||||
example: `GET /api/metrics
|
||||
X-API-Key: <your_api_key>`,
|
||||
note: 'API Key 更像“门禁卡”，要配合限流、IP 白名单、轮换、最小权限。',
|
||||
pros: ['实现简单', '适合服务间/脚本访问', '易于轮换（如果设计得当）'],
|
||||
cons: ['通常缺少用户上下文', '泄露后影响大', '需要做权限/轮换/审计']
|
||||
}
|
||||
]
|
||||
|
||||
const setRole = (role) => {
|
||||
currentRole.value = role
|
||||
}
|
||||
|
||||
const toggleProtection = (area) => {
|
||||
area.protected = !area.protected
|
||||
}
|
||||
|
||||
const canAccess = (area) => {
|
||||
if (!area.protected) return true
|
||||
|
||||
const roleAccess = {
|
||||
guest: [],
|
||||
user: ['登录'],
|
||||
vip: ['登录', 'VIP'],
|
||||
admin: ['登录', 'VIP', '管理员']
|
||||
}
|
||||
|
||||
const permissions = roleAccess[currentRole.value] || []
|
||||
return permissions.includes(area.requiredRole)
|
||||
}
|
||||
const current = ref(methods[0].id)
|
||||
const active = computed(
|
||||
() => methods.find((m) => m.id === current.value) || methods[0]
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-basics-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.building-metaphor {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.building {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.building-header {
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.building-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.building-text {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.building-areas {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.area {
|
||||
position: relative;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.area:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.area.protected {
|
||||
border-color: #f59e0b;
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
}
|
||||
|
||||
.area.can-access {
|
||||
border-color: #22c55e;
|
||||
background: rgba(34, 197, 94, 0.05);
|
||||
}
|
||||
|
||||
.area-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.area-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.area-status,
|
||||
.area-access {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.lock-icon,
|
||||
.access-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.lock-text {
|
||||
color: #f59e0b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.access-text {
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-control {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.control-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.role-selector {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.role-btn {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.role-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.role-btn.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.role-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.scenarios {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.scenario-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.scenario-card {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
.tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.2s ease;
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.scenario-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
.tab.active {
|
||||
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
|
||||
box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
}
|
||||
|
||||
.scenario-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.scenario-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.scenario-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.scenario-example {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-style: italic;
|
||||
padding: 0.5rem;
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scenario-privacy .scenario-icon {
|
||||
filter: hue-rotate(200deg);
|
||||
}
|
||||
.scenario-permission .scenario-icon {
|
||||
filter: hue-rotate(120deg);
|
||||
}
|
||||
.scenario-abuse .scenario-icon {
|
||||
filter: hue-rotate(0deg);
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.key-point {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
padding: 1rem;
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.key-point-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
.card-title {
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.key-point-text {
|
||||
.code {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.key-point-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
.two {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.building-areas {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.scenario-cards {
|
||||
.box-title {
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.role-selector {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.role-btn {
|
||||
min-width: auto;
|
||||
.two {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,415 +1,256 @@
|
||||
<!--
|
||||
AuthEvolutionDemo.vue
|
||||
鉴权方案演进史演示
|
||||
鉴权方案演进（更可用：给出“什么时候用”）
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-evolution-demo">
|
||||
<div class="header">
|
||||
<div class="title">鉴权方案演进史</div>
|
||||
<div class="subtitle">从 HTTP Basic 到现代 JWT 的技术演进</div>
|
||||
<div class="title">🧭 鉴权方案演进：从 Basic 到 OAuth2</div>
|
||||
<div class="subtitle">点击卡片，快速建立“场景 → 方案”的直觉。</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
<div
|
||||
v-for="(era, index) in eras"
|
||||
:key="era.key"
|
||||
class="era-item"
|
||||
:class="{ active: selectedEra === era.key }"
|
||||
@click="selectEra(era.key)"
|
||||
<button
|
||||
v-for="s in stages"
|
||||
:key="s.id"
|
||||
class="stage"
|
||||
:class="{ active: activeId === s.id }"
|
||||
@click="activeId = s.id"
|
||||
>
|
||||
<div class="era-marker">{{ index + 1 }}</div>
|
||||
<div class="era-content">
|
||||
<div class="era-title">{{ era.title }}</div>
|
||||
<div class="era-year">{{ era.year }}</div>
|
||||
<div class="stage-top">
|
||||
<span class="icon">{{ s.icon }}</span>
|
||||
<span class="name">{{ s.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-sub">{{ s.when }}</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="era-details" v-if="currentEra">
|
||||
<div class="era-header">
|
||||
<h3>{{ currentEra.title }}</h3>
|
||||
<span class="era-badge">{{ currentEra.year }}</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">{{ active.icon }} {{ active.name }}</div>
|
||||
<div class="desc">{{ active.desc }}</div>
|
||||
|
||||
<div class="era-description">
|
||||
{{ currentEra.description }}
|
||||
</div>
|
||||
|
||||
<div class="era-flow" v-if="currentEra.flow">
|
||||
<div class="flow-title">工作流程</div>
|
||||
<div class="flow-steps">
|
||||
<div
|
||||
v-for="(step, idx) in currentEra.flow"
|
||||
:key="idx"
|
||||
class="flow-step"
|
||||
>
|
||||
<div class="step-number">{{ idx + 1 }}</div>
|
||||
<div class="step-content">{{ step }}</div>
|
||||
<div v-if="idx < currentEra.flow.length - 1" class="step-arrow">
|
||||
→
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="era-pros-cons">
|
||||
<div class="pros">
|
||||
<div class="list-title">优点</div>
|
||||
<ul>
|
||||
<li v-for="(pro, idx) in currentEra.pros" :key="idx">{{ pro }}</li>
|
||||
<div class="grid">
|
||||
<div class="box">
|
||||
<div class="box-title">✅ 适合</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.pros" :key="i">{{ x }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<div class="list-title">缺点</div>
|
||||
<ul>
|
||||
<li v-for="(con, idx) in currentEra.cons" :key="idx">{{ con }}</li>
|
||||
<div class="box">
|
||||
<div class="box-title">⚠️ 主要风险</div>
|
||||
<ul class="list">
|
||||
<li v-for="(x, i) in active.cons" :key="i">{{ x }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="era-usecase">
|
||||
<div class="usecase-title">适用场景</div>
|
||||
<div class="usecase-content">{{ currentEra.usecase }}</div>
|
||||
</div>
|
||||
<pre class="code"><code>{{ active.example }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const selectedEra = ref('basic')
|
||||
|
||||
const eras = [
|
||||
const stages = [
|
||||
{
|
||||
key: 'basic',
|
||||
title: 'HTTP Basic Authentication',
|
||||
year: '1990s',
|
||||
description:
|
||||
'最古老的鉴权方案，直接把用户名密码经过 Base64 编码后放在 HTTP 头中。虽然简单，但因为安全性问题已不推荐使用。',
|
||||
flow: [
|
||||
'客户端发送用户名密码',
|
||||
'服务器验证身份',
|
||||
'返回受保护资源',
|
||||
'每次请求都携带密码'
|
||||
],
|
||||
pros: ['实现简单，所有浏览器都支持', '标准化协议', '无需额外存储'],
|
||||
cons: [
|
||||
'Base64 可解码，相当于明文传输',
|
||||
'每次请求都要传密码，容易被截获',
|
||||
'无法主动注销（除非关闭浏览器）',
|
||||
'无法防止 CSRF 攻击'
|
||||
],
|
||||
usecase: '只适合内部测试工具，绝不用于生产环境'
|
||||
id: 'basic',
|
||||
icon: '🪪',
|
||||
name: 'HTTP Basic',
|
||||
when: '内部工具/调试',
|
||||
desc: '最早期的方案：每次请求都带 username/password（或等价凭证）。',
|
||||
pros: ['实现最简单', '不需要额外存储'],
|
||||
cons: ['每次请求都带“高价值凭证”', '不适合公网生产', '很难做细粒度授权'],
|
||||
example: `GET /api/profile
|
||||
Authorization: Basic <base64(username:password)>`
|
||||
},
|
||||
{
|
||||
key: 'session',
|
||||
title: 'Session + Cookie',
|
||||
year: '2000s',
|
||||
description:
|
||||
'Web 开发的经典方案。服务器验证用户身份后创建 Session，返回 Session ID 给客户端，客户端每次请求自动带上 Cookie。',
|
||||
flow: [
|
||||
'用户登录提交用户名密码',
|
||||
'服务器验证并创建 Session',
|
||||
'返回 Set-Cookie: session_id',
|
||||
'后续请求自动带上 Cookie'
|
||||
],
|
||||
pros: [
|
||||
'简单直观，易于理解',
|
||||
'服务端可以主动注销（删除 Session）',
|
||||
'Session 信息存储在服务端，相对安全'
|
||||
],
|
||||
id: 'session',
|
||||
icon: '🍪',
|
||||
name: 'Session + Cookie',
|
||||
when: '传统 Web / SSR',
|
||||
desc: '服务端存 Session，浏览器存 cookie(session_id)。后续请求自动带 Cookie。',
|
||||
pros: ['服务端可主动注销', '很适合同域 SSR', '工程落地成熟'],
|
||||
cons: [
|
||||
'服务器有状态，需要存储 Session',
|
||||
'多台服务器需要共享 Session（如 Redis）',
|
||||
'跨域困难，Cookie 默认不能跨域',
|
||||
'容易受到 CSRF 攻击'
|
||||
'服务端有状态，需要共享/扩展',
|
||||
'CSRF 风险更高（必须防）',
|
||||
'跨域更麻烦'
|
||||
],
|
||||
usecase: '适合传统 Web 应用（服务器端渲染），不适合移动端和现代 SPA'
|
||||
example: `POST /login
|
||||
→ Set-Cookie: session_id=abc; HttpOnly; Secure; SameSite=Lax
|
||||
|
||||
GET /api/profile
|
||||
Cookie: session_id=abc`
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
title: 'JWT (JSON Web Token)',
|
||||
year: '2010s',
|
||||
description:
|
||||
'现代 Web 的主流方案。不在服务端存储状态，把用户信息加密成 Token，放在客户端。JWT 由 Header、Payload、Signature 三部分组成。',
|
||||
flow: [
|
||||
'用户登录验证身份',
|
||||
'服务器生成 JWT Token',
|
||||
'客户端存储 Token（localStorage）',
|
||||
'后续请求在 Header 中携带 Token'
|
||||
id: 'jwt',
|
||||
icon: '🎫',
|
||||
name: 'JWT Access Token',
|
||||
when: 'API / 移动端 / 多服务',
|
||||
desc: '服务端不存状态，把声明编码为 token；请求携带 Authorization: Bearer。',
|
||||
pros: ['无状态易扩展', '跨域友好', '多服务常用'],
|
||||
cons: [
|
||||
'难以全局注销（要额外机制）',
|
||||
'token 体积大',
|
||||
'payload 可读（别放敏感信息）'
|
||||
],
|
||||
example: `GET /api/profile
|
||||
Authorization: Bearer <access_token>`
|
||||
},
|
||||
{
|
||||
id: 'oauth2',
|
||||
icon: '🔑',
|
||||
name: 'OAuth2 / OIDC',
|
||||
when: '第三方登录/授权',
|
||||
desc: '解决“第三方授权/登录”，让应用无需保存第三方账号密码。',
|
||||
pros: [
|
||||
'无状态，服务端不存储 Session',
|
||||
'易于横向扩展',
|
||||
'跨域友好，不受 Cookie 限制',
|
||||
'移动端友好，原生 App 也能轻松使用',
|
||||
'Payload 可以存储用户信息、权限等'
|
||||
'用户体验好（扫码/一键登录）',
|
||||
'安全边界更清晰',
|
||||
'可扩展到 OIDC（登录）'
|
||||
],
|
||||
cons: [
|
||||
'无法主动注销，Token 一旦签发在过期前一直有效',
|
||||
'Payload 可见（Base64 编码），不能存敏感信息',
|
||||
'Token 过大，每次请求都要带上',
|
||||
'需要额外的黑名单机制实现注销'
|
||||
'接入复杂度更高',
|
||||
'必须正确处理 redirect_uri/state',
|
||||
'token 生命周期设计很关键'
|
||||
],
|
||||
usecase: '现代 Web 和移动端的标准方案，特别适合分布式系统和微服务架构'
|
||||
example: `GET /authorize?response_type=code&client_id=...&redirect_uri=...&state=...`
|
||||
}
|
||||
]
|
||||
|
||||
const currentEra = computed(() => eras.find((e) => e.key === selectedEra.value))
|
||||
|
||||
const selectEra = (key) => {
|
||||
selectedEra.value = key
|
||||
}
|
||||
const activeId = ref(stages[1].id)
|
||||
const active = computed(
|
||||
() => stages.find((s) => s.id === activeId.value) || stages[0]
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-evolution-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.era-item {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
padding: 1rem;
|
||||
.stage {
|
||||
text-align: left;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.stage.active {
|
||||
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
|
||||
box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
}
|
||||
|
||||
.stage-top {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.era-item:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.era-item.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.era-marker {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.era-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.era-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.era-year {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.era-details {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.era-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.era-header h3 {
|
||||
margin: 0;
|
||||
.icon {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.era-badge {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
.name {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.era-description {
|
||||
.stage-sub {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.era-flow {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.era-pros-cons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.pros,
|
||||
.cons {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-weight: 600;
|
||||
.card-title {
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.pros ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.pros li {
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.cons ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.cons li {
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.era-usecase {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.usecase-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.4rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.usecase-content {
|
||||
font-size: 0.85rem;
|
||||
.desc {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
line-height: 1.75;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.code {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.timeline {
|
||||
flex-direction: column;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.era-item {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.era-pros-cons {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,862 @@
|
||||
<!--
|
||||
AuthInteractiveLoginDemo.vue
|
||||
交互式登录流程演示
|
||||
|
||||
用途：
|
||||
通过模拟真实的登录流程，让用户直观理解认证和授权的概念。
|
||||
|
||||
互动功能：
|
||||
- 模拟登录：输入用户名密码，看到完整的认证流程
|
||||
- 可视化数据流：HTTP 请求和响应的实时展示
|
||||
- 两种模式对比：Session vs JWT
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-interactive-login">
|
||||
<div class="header">
|
||||
<div class="title">🔐 认证流程演示</div>
|
||||
<div class="subtitle">模拟登录过程，理解认证与授权的区别</div>
|
||||
</div>
|
||||
|
||||
<!-- 模式切换 -->
|
||||
<div class="mode-selector">
|
||||
<div class="mode-label">选择鉴权方式：</div>
|
||||
<div class="mode-buttons">
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: mode === 'session' }"
|
||||
@click="switchMode('session')"
|
||||
>
|
||||
🍪 Session + Cookie
|
||||
</button>
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: mode === 'jwt' }"
|
||||
@click="switchMode('jwt')"
|
||||
>
|
||||
🎫 JWT Token
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- 登录表单 -->
|
||||
<div class="login-section">
|
||||
<div class="form-container">
|
||||
<div class="form-title">登录表单</div>
|
||||
<div class="form-fields">
|
||||
<div class="field-group">
|
||||
<label>用户名</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="username"
|
||||
placeholder="输入用户名"
|
||||
:disabled="locked"
|
||||
/>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label>密码</label>
|
||||
<input
|
||||
type="password"
|
||||
v-model="password"
|
||||
placeholder="输入密码"
|
||||
:disabled="locked"
|
||||
@keyup.enter="startDemo"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="login-btn"
|
||||
@click="startDemo"
|
||||
:disabled="!username || !password || locked"
|
||||
>
|
||||
开始演示
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hints">
|
||||
<div class="hint-title">💡 提示</div>
|
||||
<div class="hint-text">
|
||||
试试用户名 <code>admin</code>，密码 <code>123456</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stepper" v-if="flowStep > 0">
|
||||
<div class="stepper-title">
|
||||
当前步骤：{{ flowStep }} / {{ maxStep }}
|
||||
<span class="stepper-hint"
|
||||
>（手动推进，避免“自动下一步”误解）</span
|
||||
>
|
||||
</div>
|
||||
<div class="stepper-actions">
|
||||
<button
|
||||
class="step-btn"
|
||||
@click="prevStep"
|
||||
:disabled="flowStep <= 1"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="step-btn primary"
|
||||
@click="nextStep"
|
||||
:disabled="flowStep >= maxStep"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="step-btn" @click="resetDemo">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实时数据流 -->
|
||||
<div class="data-flow">
|
||||
<div class="flow-title">📊 数据流可视化</div>
|
||||
|
||||
<!-- 请求阶段 -->
|
||||
<div class="flow-stage request-stage" v-if="currentStage >= 1">
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">{{
|
||||
currentStage === 1 ? '📤' : '✅'
|
||||
}}</span>
|
||||
<span class="stage-name">1. 客户端发送登录请求</span>
|
||||
</div>
|
||||
<div class="request-content" v-if="currentStage >= 1">
|
||||
<div class="request-line">
|
||||
<span class="method">POST</span>
|
||||
<span class="path">/api/login</span>
|
||||
</div>
|
||||
<div class="request-body">
|
||||
<div class="body-title">Body:</div>
|
||||
<pre>
|
||||
{
|
||||
"username": "{{ username }}",
|
||||
"password": "******"
|
||||
}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" v-if="currentStage >= 1">⬇️</div>
|
||||
|
||||
<!-- 服务器验证阶段 -->
|
||||
<div class="flow-stage server-stage" v-if="currentStage >= 2">
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">{{
|
||||
currentStage === 2 ? '⚙️' : '✅'
|
||||
}}</span>
|
||||
<span class="stage-name">2. 服务器验证身份</span>
|
||||
</div>
|
||||
<div class="server-content" v-if="currentStage >= 2">
|
||||
<div class="verification-steps">
|
||||
<div
|
||||
class="verify-step"
|
||||
:class="{ success: verificationStep >= 1 }"
|
||||
>
|
||||
<span class="step-icon">{{
|
||||
verificationStep >= 1 ? '✅' : '⏳'
|
||||
}}</span>
|
||||
<span class="step-text">查询用户数据库</span>
|
||||
</div>
|
||||
<div
|
||||
class="verify-step"
|
||||
:class="{ success: verificationStep >= 2 }"
|
||||
>
|
||||
<span class="step-icon">{{
|
||||
verificationStep >= 2 ? '✅' : '⏳'
|
||||
}}</span>
|
||||
<span class="step-text">验证密码哈希</span>
|
||||
</div>
|
||||
<div
|
||||
class="verify-step"
|
||||
:class="{ success: verificationStep >= 3 }"
|
||||
>
|
||||
<span class="step-icon">{{
|
||||
verificationStep >= 3 ? '✅' : '⏳'
|
||||
}}</span>
|
||||
<span class="step-text"
|
||||
>生成{{
|
||||
mode === 'session' ? 'Session' : 'JWT Token'
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" v-if="currentStage >= 2">⬇️</div>
|
||||
|
||||
<!-- 响应阶段 -->
|
||||
<div class="flow-stage response-stage" v-if="currentStage >= 3">
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">{{
|
||||
currentStage === 3 ? '📥' : '✅'
|
||||
}}</span>
|
||||
<span class="stage-name">3. 服务器返回认证结果</span>
|
||||
</div>
|
||||
<div class="response-content" v-if="authResult">
|
||||
<div class="response-status success">✅ 登录成功</div>
|
||||
<div class="response-body">
|
||||
<div class="body-title">Response:</div>
|
||||
<pre v-if="mode === 'session'">
|
||||
{
|
||||
"status": "success",
|
||||
"user": {
|
||||
"id": 123,
|
||||
"username": "{{ username }}"
|
||||
}
|
||||
}</pre
|
||||
>
|
||||
<pre v-else>
|
||||
{
|
||||
"status": "success",
|
||||
"token": "{{ authResult?.token }}",
|
||||
"user": {
|
||||
"id": 123,
|
||||
"username": "{{ username }}"
|
||||
}
|
||||
}</pre
|
||||
>
|
||||
</div>
|
||||
<div class="auth-mechanism" v-if="currentStage >= 4">
|
||||
<div class="mechanism-title">
|
||||
{{ mode === 'session' ? '🍪 Cookie 设置' : '🎫 Token 存储' }}
|
||||
</div>
|
||||
<div class="mechanism-content">
|
||||
<div v-if="mode === 'session'">
|
||||
<code
|
||||
>Set-Cookie: session_id={{ authResult?.sessionId }};
|
||||
HttpOnly; Secure</code
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<code
|
||||
>localStorage.setItem("token", "{{
|
||||
authResult?.token
|
||||
}}")</code
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 后续请求 -->
|
||||
<div class="flow-stage request-stage" v-if="currentStage >= 5">
|
||||
<div class="stage-header">
|
||||
<span class="stage-badge">🔄</span>
|
||||
<span class="stage-name">4. 后续请求自动携带认证信息</span>
|
||||
</div>
|
||||
<div class="subsequent-request">
|
||||
<div class="request-line">
|
||||
<span class="method">GET</span>
|
||||
<span class="path">/api/user/profile</span>
|
||||
</div>
|
||||
<div class="auth-header">
|
||||
<div class="header-title">Header:</div>
|
||||
<div v-if="mode === 'session'">
|
||||
<code>Cookie: session_id={{ authResult?.sessionId }}</code>
|
||||
</div>
|
||||
<div v-else>
|
||||
<code>Authorization: Bearer {{ authResult?.token }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态说明 -->
|
||||
<div class="state-description" v-if="currentStage >= 4">
|
||||
<div class="description-title">
|
||||
📖 {{ mode === 'session' ? 'Session' : 'JWT' }} 工作原理
|
||||
</div>
|
||||
<div class="description-content">
|
||||
<p v-if="mode === 'session'">
|
||||
<strong>Session 模式：</strong>服务器在内存或 Redis 中创建一个
|
||||
Session，存储用户信息。 服务器返回一个
|
||||
<code>session_id</code> 给客户端，客户端后续请求会自动在 Cookie
|
||||
中携带这个 ID。 服务器根据 ID 查找对应的 Session，从而识别用户身份。
|
||||
</p>
|
||||
<p v-else>
|
||||
<strong>JWT 模式：</strong>服务器将用户信息编码成 JWT
|
||||
Token，直接返回给客户端。 客户端将 Token 存储在
|
||||
localStorage，后续请求在 <code>Authorization</code> Header 中携带。
|
||||
服务器验证 Token 的签名即可识别用户，无需存储状态。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 重置按钮 -->
|
||||
<div class="reset-section" v-if="currentStage >= 5">
|
||||
<button class="reset-btn" @click="resetDemo">🔄 重新演示</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const mode = ref('session') // 'session' or 'jwt'
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const flowStep = ref(0) // 0 = not started, 1..maxStep = manual steps
|
||||
const authResult = ref(null)
|
||||
const locked = ref(false)
|
||||
|
||||
const maxStep = 7
|
||||
|
||||
const currentStage = computed(() => {
|
||||
if (flowStep.value === 0) return 0
|
||||
if (flowStep.value === 1) return 1
|
||||
if (flowStep.value >= 2 && flowStep.value <= 4) return 2
|
||||
if (flowStep.value === 5) return 3
|
||||
if (flowStep.value === 6) return 4
|
||||
return 5
|
||||
})
|
||||
|
||||
const verificationStep = computed(() => {
|
||||
if (flowStep.value < 2) return 0
|
||||
if (flowStep.value === 2) return 1
|
||||
if (flowStep.value === 3) return 2
|
||||
return 3
|
||||
})
|
||||
|
||||
const switchMode = (newMode) => {
|
||||
mode.value = newMode
|
||||
resetDemo()
|
||||
}
|
||||
|
||||
const buildAuthResult = () => {
|
||||
if (mode.value === 'session') {
|
||||
return {
|
||||
sessionId: 'sess_' + Math.random().toString(36).substring(2, 15)
|
||||
}
|
||||
}
|
||||
|
||||
const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }))
|
||||
const payload = btoa(
|
||||
JSON.stringify({
|
||||
user_id: 123,
|
||||
username: username.value,
|
||||
exp: Math.floor(Date.now() / 1000) + 3600
|
||||
})
|
||||
)
|
||||
const signature = btoa(`${header}.${payload}.secret`)
|
||||
return {
|
||||
token: `${header}.${payload}.${signature}`.substring(0, 50) + '...'
|
||||
}
|
||||
}
|
||||
|
||||
const startDemo = () => {
|
||||
if (!username.value || !password.value) return
|
||||
|
||||
// Start at step 1 (request). Other steps are manual via Next.
|
||||
authResult.value = buildAuthResult()
|
||||
flowStep.value = 1
|
||||
locked.value = true
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
flowStep.value = Math.min(maxStep, flowStep.value + 1)
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
flowStep.value = Math.max(1, flowStep.value - 1)
|
||||
}
|
||||
|
||||
const resetDemo = () => {
|
||||
username.value = ''
|
||||
password.value = ''
|
||||
flowStep.value = 0
|
||||
authResult.value = null
|
||||
locked.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-interactive-login {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 模式切换 */
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mode-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.mode-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
/* 主内容 */
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* 登录表单 */
|
||||
.login-section {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stepper {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stepper-title {
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stepper-hint {
|
||||
margin-left: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.stepper-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.step-btn {
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.step-btn.primary {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.step-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.field-group label {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.field-group input {
|
||||
padding: 0.6rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.field-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.field-group input:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
padding: 0.75rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.login-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.login-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hints {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hint-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.3rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hint-text code {
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* 数据流 */
|
||||
.data-flow {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flow-stage {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
animation: slideIn 0.4s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.stage-badge {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.stage-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.request-line {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.method {
|
||||
font-weight: 700;
|
||||
color: #16a34a;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.path {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.request-body,
|
||||
.response-body {
|
||||
background: #1e293b;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.body-title,
|
||||
.header-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.request-body pre,
|
||||
.response-body pre {
|
||||
margin: 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 验证步骤 */
|
||||
.verification-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.verify-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.verify-step.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 响应 */
|
||||
.response-status {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.response-status.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
/* 认证机制 */
|
||||
.auth-mechanism {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.mechanism-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.mechanism-content code {
|
||||
display: block;
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 后续请求 */
|
||||
.subsequent-request {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-header code {
|
||||
display: block;
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* 状态说明 */
|
||||
.state-description {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.description-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.description-content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.description-content code {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
/* 重置 */
|
||||
.reset-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
padding: 0.75rem 2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #64748b;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background: #475569;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mode-selector {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mode-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,654 +1,288 @@
|
||||
<!--
|
||||
AuthNvsAuthZDemo.vue
|
||||
认证 vs 授权对比演示
|
||||
AuthN vs AuthZ（更可用：请求模拟器）
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-n-vs-z-demo">
|
||||
<div class="authn-authz-demo">
|
||||
<div class="header">
|
||||
<div class="title">认证 vs 授权</div>
|
||||
<div class="subtitle">先认证，再授权 - 两个不同的概念</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="comparison-card authn">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🔐</div>
|
||||
<div class="card-title">Authentication (认证)</div>
|
||||
<div class="card-abbr">AuthN</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="question">你是谁？</div>
|
||||
<div class="answer">验证用户身份</div>
|
||||
<div class="examples">
|
||||
<div class="example-title">常见方式：</div>
|
||||
<div class="example-list">
|
||||
<div class="example-item">🔑 输入用户名密码</div>
|
||||
<div class="example-item">👆 指纹识别</div>
|
||||
<div class="example-item">👤 人脸识别</div>
|
||||
<div class="example-item">📱 短信验证码</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output">
|
||||
<div class="output-title">输出：</div>
|
||||
<div class="output-value">Token / Session</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">VS</div>
|
||||
|
||||
<div class="comparison-card authz">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🛡️</div>
|
||||
<div class="card-title">Authorization (授权)</div>
|
||||
<div class="card-abbr">AuthZ</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="question">你能干什么？</div>
|
||||
<div class="answer">检查用户权限</div>
|
||||
<div class="examples">
|
||||
<div class="example-title">权限类型：</div>
|
||||
<div class="example-list">
|
||||
<div class="example-item">👀 查看权限</div>
|
||||
<div class="example-item">✏️ 编辑权限</div>
|
||||
<div class="example-item">🗑️ 删除权限</div>
|
||||
<div class="example-item">👨💼 管理员权限</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output">
|
||||
<div class="output-title">输出：</div>
|
||||
<div class="output-value">允许 / 拒绝</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">🪪 AuthN vs 🛂 AuthZ：一个请求到底会经历什么？</div>
|
||||
<div class="subtitle">
|
||||
选择“谁在请求”与“要做什么”，看看认证/授权分别在哪一步起作用。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-demo">
|
||||
<div class="section-title">完整流程</div>
|
||||
<div class="flow-steps">
|
||||
<div
|
||||
v-for="(step, index) in flowSteps"
|
||||
:key="index"
|
||||
class="flow-step"
|
||||
:class="{
|
||||
active: currentStep === index,
|
||||
completed: currentStep > index
|
||||
}"
|
||||
>
|
||||
<div class="step-circle">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
</div>
|
||||
<div v-if="index < flowSteps.length - 1" class="step-arrow">→</div>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">选择请求</div>
|
||||
|
||||
<label class="label">身份（AuthN：你是谁）</label>
|
||||
<div class="row">
|
||||
<button
|
||||
v-for="u in users"
|
||||
:key="u.id"
|
||||
class="chip"
|
||||
:class="{ active: userId === u.id }"
|
||||
@click="userId = u.id"
|
||||
>
|
||||
{{ u.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="label">操作（AuthZ：你能做什么）</label>
|
||||
<div class="row">
|
||||
<button
|
||||
v-for="a in actions"
|
||||
:key="a.id"
|
||||
class="chip"
|
||||
:class="{ active: actionId === a.id }"
|
||||
@click="actionId = a.id"
|
||||
>
|
||||
{{ a.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hint">
|
||||
真实系统里：认证先发生（解析
|
||||
cookie/JWT），授权发生在路由/业务逻辑层（RBAC/ABAC）。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scenario-demo">
|
||||
<div class="scenario-header">模拟场景</div>
|
||||
<div class="scenario-content">
|
||||
<div class="user-action">
|
||||
<div class="action-label">用户操作：</div>
|
||||
<select v-model="selectedAction" @change="runScenario">
|
||||
<option value="view">查看文章</option>
|
||||
<option value="edit">编辑文章</option>
|
||||
<option value="delete">删除文章</option>
|
||||
<option value="admin">访问管理后台</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">模拟结果</div>
|
||||
|
||||
<div class="user-role">
|
||||
<div class="role-label">用户角色：</div>
|
||||
<div class="role-buttons">
|
||||
<button
|
||||
v-for="role in roles"
|
||||
:key="role.key"
|
||||
class="role-btn"
|
||||
:class="{ active: selectedRole === role.key }"
|
||||
@click="setRole(role.key)"
|
||||
>
|
||||
{{ role.label }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="result">
|
||||
<div class="line">
|
||||
<span class="k">AuthN（认证）</span>
|
||||
<span class="v" :class="authn.ok ? 'ok' : 'bad'">
|
||||
{{ authn.ok ? '通过' : '失败' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="result-box" :class="resultClass">
|
||||
<div class="result-icon">{{ resultIcon }}</div>
|
||||
<div class="result-text">{{ resultText }}</div>
|
||||
<div class="line">
|
||||
<span class="k">AuthZ（授权）</span>
|
||||
<span class="v" :class="authz.ok ? 'ok' : 'bad'">
|
||||
{{ authz.ok ? '允许' : '拒绝' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="step-details" v-if="stepDetails.length > 0">
|
||||
<div class="step-details-title">处理流程：</div>
|
||||
<div
|
||||
class="step-detail-item"
|
||||
v-for="(detail, idx) in stepDetails"
|
||||
:key="idx"
|
||||
>
|
||||
<span class="detail-step">步骤 {{ idx + 1 }}：</span>
|
||||
<span class="detail-text">{{ detail }}</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<span class="k">HTTP</span>
|
||||
<span class="v mono">{{ finalStatus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre class="code"><code>{{ decisionLog }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-insight">
|
||||
<div class="insight-icon">💡</div>
|
||||
<div class="insight-text">
|
||||
<strong>核心关系：</strong>先认证（AuthN），再授权（AuthZ）。
|
||||
只有确认了"你是谁"，才能判断"你能干什么"。
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">关键点</div>
|
||||
<ul class="list">
|
||||
<li><strong>认证失败：</strong>你是谁都不确定 → 通常返回 401。</li>
|
||||
<li>
|
||||
<strong>认证通过但没权限：</strong>你是谁确定了，但不能做 → 通常返回
|
||||
403。
|
||||
</li>
|
||||
<li>
|
||||
<strong>授权规则要在服务端：</strong
|
||||
>别相信前端的“是否显示按钮”，那只是 UX。
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const currentStep = ref(0)
|
||||
const selectedAction = ref('view')
|
||||
const selectedRole = ref('user')
|
||||
|
||||
const roles = [
|
||||
{ key: 'guest', label: '访客' },
|
||||
{ key: 'user', label: '普通用户' },
|
||||
{ key: 'admin', label: '管理员' }
|
||||
const users = [
|
||||
{ id: 'anon', name: '匿名用户' },
|
||||
{ id: 'user', name: '普通用户' },
|
||||
{ id: 'admin', name: '管理员' }
|
||||
]
|
||||
|
||||
const flowSteps = [
|
||||
{
|
||||
title: '用户请求',
|
||||
desc: '用户发起操作请求'
|
||||
},
|
||||
{
|
||||
title: '认证 (AuthN)',
|
||||
desc: '验证 Token 是否有效'
|
||||
},
|
||||
{
|
||||
title: '授权 (AuthZ)',
|
||||
desc: '检查是否有权限'
|
||||
},
|
||||
{
|
||||
title: '执行业务逻辑',
|
||||
desc: '允许或拒绝访问'
|
||||
}
|
||||
const actions = [
|
||||
{ id: 'view_profile', name: '查看个人资料（/api/me）' },
|
||||
{ id: 'create_post', name: '发帖（POST /posts）' },
|
||||
{ id: 'delete_user', name: '删除用户（DELETE /users/:id）' }
|
||||
]
|
||||
|
||||
const actionPermissions = {
|
||||
view: { guest: true, user: true, admin: true },
|
||||
edit: { guest: false, user: true, admin: true },
|
||||
delete: { guest: false, user: false, admin: true },
|
||||
admin: { guest: false, user: false, admin: true }
|
||||
}
|
||||
const userId = ref('anon')
|
||||
const actionId = ref('view_profile')
|
||||
|
||||
const actionNames = {
|
||||
view: '查看文章',
|
||||
edit: '编辑文章',
|
||||
delete: '删除文章',
|
||||
admin: '访问管理后台'
|
||||
}
|
||||
const authn = computed(() => {
|
||||
if (userId.value === 'anon')
|
||||
return { ok: false, reason: '缺少有效凭证（cookie/JWT）' }
|
||||
return { ok: true, reason: `识别为 ${userId.value}` }
|
||||
})
|
||||
|
||||
const stepDetails = ref([])
|
||||
|
||||
const resultText = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
const action = actionNames[selectedAction.value]
|
||||
const role = roles.find((r) => r.key === selectedRole.value)?.label
|
||||
|
||||
if (!hasPermission) {
|
||||
return `${role}无法${action} - 权限不足`
|
||||
const authz = computed(() => {
|
||||
if (!authn.value.ok)
|
||||
return { ok: false, reason: '认证未通过，无法做授权判断' }
|
||||
if (actionId.value === 'delete_user') {
|
||||
return userId.value === 'admin'
|
||||
? { ok: true, reason: 'admin 允许删除用户' }
|
||||
: { ok: false, reason: '只有 admin 才能删除用户' }
|
||||
}
|
||||
return `${role}可以${action} - 授权通过`
|
||||
return { ok: true, reason: '此操作对已登录用户开放' }
|
||||
})
|
||||
|
||||
const resultClass = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
return hasPermission ? 'success' : 'error'
|
||||
const finalStatus = computed(() => {
|
||||
if (!authn.value.ok) return '401 Unauthorized'
|
||||
if (!authz.value.ok) return '403 Forbidden'
|
||||
return '200 OK'
|
||||
})
|
||||
|
||||
const resultIcon = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
return hasPermission ? '✅' : '❌'
|
||||
const decisionLog = computed(() => {
|
||||
const lines = []
|
||||
lines.push(`Request: ${actionId.value}`)
|
||||
lines.push(
|
||||
`AuthN: ${authn.value.ok ? 'PASS' : 'FAIL'} - ${authn.value.reason}`
|
||||
)
|
||||
lines.push(
|
||||
`AuthZ: ${authz.value.ok ? 'ALLOW' : 'DENY'} - ${authz.value.reason}`
|
||||
)
|
||||
lines.push(`Result: ${finalStatus.value}`)
|
||||
return lines.join('\n')
|
||||
})
|
||||
|
||||
const setRole = (role) => {
|
||||
selectedRole.value = role
|
||||
runScenario()
|
||||
}
|
||||
|
||||
const runScenario = () => {
|
||||
const action = selectedAction.value
|
||||
const role = selectedRole.value
|
||||
const hasPermission = actionPermissions[action][role]
|
||||
|
||||
stepDetails.value = [
|
||||
`用户请求：${actionNames[action]}`,
|
||||
`认证检查：${role !== 'guest' ? '已登录，Token 有效' : '未登录或 Token 无效'}`,
|
||||
`授权检查：检查 ${role} 是否有 ${action} 权限`,
|
||||
`最终决定：${hasPermission ? '允许访问' : '拒绝访问，返回 403 Forbidden'}`
|
||||
]
|
||||
|
||||
currentStep.value = 4
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-n-vs-z-demo {
|
||||
.authn-authz-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comparison-card {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.comparison-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comparison-card.authn {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz {
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-abbr {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
.label {
|
||||
display: block;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
margin: 0.75rem 0 0.35rem;
|
||||
}
|
||||
|
||||
.comparison-card.authn .card-abbr {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz .card-abbr {
|
||||
background: #8b5cf6;
|
||||
}
|
||||
|
||||
.question {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.answer {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.examples {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.example-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.example-item {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.comparison-card.authn .example-item {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz .example-item {
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.output {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.comparison-card.authn .output {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz .output {
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.output-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.flow-demo {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.flow-step.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.flow-step.completed {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.scenario-demo {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.scenario-header {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.scenario-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-action,
|
||||
.user-role {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-label,
|
||||
.role-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.user-action select {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.role-buttons {
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.role-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
.chip {
|
||||
padding: 0.4rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.role-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
.chip.active {
|
||||
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
|
||||
box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
}
|
||||
|
||||
.role-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
.hint {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-box.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid #22c55e;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.result-box.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid #ef4444;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.step-details {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
.result {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-details-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.step-detail-item {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-detail-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-step {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.key-insight {
|
||||
.line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
.k {
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
.v {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.insight-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
.v.ok {
|
||||
color: var(--vp-c-green-1, #22c55e);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison {
|
||||
flex-direction: column;
|
||||
}
|
||||
.v.bad {
|
||||
color: var(--vp-c-red-1, #ef4444);
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
transform: rotate(90deg);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.mono {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
flex-direction: column;
|
||||
}
|
||||
.code {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
transform: rotate(90deg);
|
||||
.list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,772 +1,294 @@
|
||||
<!--
|
||||
CSRFDefenseDemo.vue
|
||||
CSRF 防御演示
|
||||
CSRF 防护（手动推进 + “怎么做”清单）
|
||||
-->
|
||||
<template>
|
||||
<div class="csrf-defense-demo">
|
||||
<div class="csrf-demo">
|
||||
<div class="header">
|
||||
<div class="title">CSRF 攻击与防御</div>
|
||||
<div class="subtitle">Cross-Site Request Forgery 跨站请求伪造</div>
|
||||
</div>
|
||||
|
||||
<div class="attack-demo">
|
||||
<div class="demo-title">CSRF 攻击演示</div>
|
||||
<div class="attack-scenario">
|
||||
<div class="scenario-box good-site">
|
||||
<div class="box-header">
|
||||
<span class="box-icon">🏦</span>
|
||||
<span class="box-title">银行网站 bank.com</span>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="login-status" :class="{ logged: isLoggedIn }">
|
||||
{{ isLoggedIn ? '✅ 已登录' : '❌ 未登录' }}
|
||||
</div>
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
class="action-btn transfer"
|
||||
@click="performTransfer"
|
||||
>
|
||||
💰 转账
|
||||
</button>
|
||||
<button v-else class="action-btn login" @click="isLoggedIn = true">
|
||||
🔑 登录银行
|
||||
</button>
|
||||
<div class="cookie-info" v-if="isLoggedIn">
|
||||
<div class="info-title">浏览器 Cookie</div>
|
||||
<div class="cookie-item">
|
||||
<span class="cookie-key">session_id:</span>
|
||||
<span class="cookie-value">bank_session_xyz</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scenario-arrow">→ 用户同时访问</div>
|
||||
|
||||
<div class="scenario-box evil-site">
|
||||
<div class="box-header">
|
||||
<span class="box-icon">😈</span>
|
||||
<span class="box-title">恶意网站 evil.com</span>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="evil-content">
|
||||
<p>🎣 欢迎来到抽奖活动！</p>
|
||||
<button class="action-btn evil-btn" @click="triggerAttack">
|
||||
🎁 点击抽奖
|
||||
</button>
|
||||
<div class="evil-code" v-if="attackTriggered">
|
||||
<div class="code-title">恶意代码（隐藏）：</div>
|
||||
<pre class="code-block">
|
||||
<img src="https://bank.com/api/transfer?to=attacker&amount=10000" /></pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attack-result" v-if="attackResult">
|
||||
<div class="result-box" :class="attackResult.type">
|
||||
<div class="result-icon">{{ attackResult.icon }}</div>
|
||||
<div class="result-text">{{ attackResult.text }}</div>
|
||||
</div>
|
||||
<div class="title">🛡️ CSRF：为什么“自动带 Cookie”会出事？</div>
|
||||
<div class="subtitle">
|
||||
手动推进一个最小攻击链，再看 3 个最常用防护手段（SameSite / CSRF Token /
|
||||
双重提交）。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="defense-mechanisms">
|
||||
<div class="mechanisms-title">防御措施</div>
|
||||
<div class="controls">
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-tabs">
|
||||
<button
|
||||
v-for="mechanism in mechanisms"
|
||||
:key="mechanism.key"
|
||||
class="tab-btn"
|
||||
:class="{ active: selectedMechanism === mechanism.key }"
|
||||
@click="selectedMechanism = mechanism.key"
|
||||
>
|
||||
<span class="tab-icon">{{ mechanism.icon }}</span>
|
||||
<span class="tab-label">{{ mechanism.name }}</span>
|
||||
</button>
|
||||
<div v-if="step > 0" class="progress">
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">场景</div>
|
||||
<div class="desc">
|
||||
假设你登录了 <strong>bank.com</strong>（Cookie
|
||||
已存在）。你又打开了一个恶意网站
|
||||
<strong>evil.com</strong>，它偷偷发起转账请求。
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">你的 Cookie（浏览器会自动带）</div>
|
||||
<code class="mono">Cookie: session_id=abc123</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-content" v-if="currentMechanism">
|
||||
<div class="mechanism-header">
|
||||
<div class="header-title">{{ currentMechanism.title }}</div>
|
||||
<div class="header-subtitle">{{ currentMechanism.subtitle }}</div>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-demo">
|
||||
<div class="demo-flow">
|
||||
<div class="flow-steps">
|
||||
<div
|
||||
v-for="(step, index) in currentMechanism.steps"
|
||||
:key="index"
|
||||
class="flow-step"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-content">{{ step }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-example" v-if="currentMechanism.code">
|
||||
<div class="code-title">代码示例</div>
|
||||
<pre class="code-block">{{ currentMechanism.code }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mechanism-pros-cons">
|
||||
<div class="pros">
|
||||
<div class="list-title">优点</div>
|
||||
<ul>
|
||||
<li v-for="(pro, index) in currentMechanism.pros" :key="index">
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<div class="list-title">注意事项</div>
|
||||
<ul>
|
||||
<li v-for="(con, index) in currentMechanism.cons" :key="index">
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">本步请求</div>
|
||||
<pre class="code"><code>{{ requestText }}</code></pre>
|
||||
<div class="desc">{{ steps[step - 1]?.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="table-title">CSRF vs XSS 对比</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>特性</th>
|
||||
<th>CSRF</th>
|
||||
<th>XSS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>攻击方式</strong></td>
|
||||
<td>冒用用户身份发送请求</td>
|
||||
<td>在网页注入恶意脚本</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>攻击目标</strong></td>
|
||||
<td>trusted 网站</td>
|
||||
<td>网站的其他用户</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>利用点</strong></td>
|
||||
<td>浏览器自动带 Cookie</td>
|
||||
<td>网站未过滤用户输入</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>防御重点</strong></td>
|
||||
<td>验证请求来源</td>
|
||||
<td>输出转义、CSP</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card">
|
||||
<div class="card-title">防护怎么选？（优先顺序）</div>
|
||||
<ol class="list">
|
||||
<li>
|
||||
<strong>SameSite Cookie：</strong
|
||||
>对大多数“跨站表单/图片”请求非常有效（Lax/Strict）。
|
||||
</li>
|
||||
<li>
|
||||
<strong>CSRF Token：</strong>在表单/请求头里带
|
||||
token，服务端校验（对复杂场景最稳）。
|
||||
</li>
|
||||
<li>
|
||||
<strong>双重提交 Cookie：</strong>Cookie + Header 同时带
|
||||
token（服务端比较一致性）。
|
||||
</li>
|
||||
</ol>
|
||||
<div class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-text">
|
||||
CSRF 主要针对“Cookie 自动携带”的场景。若你用 Authorization:
|
||||
Bearer（不自动发送），CSRF 风险会显著降低，但仍要考虑 XSS/Token
|
||||
泄露等问题。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const isLoggedIn = ref(false)
|
||||
const attackTriggered = ref(false)
|
||||
const attackResult = ref(null)
|
||||
const selectedMechanism = ref('csrf-token')
|
||||
const maxStep = 4
|
||||
const step = ref(0)
|
||||
|
||||
const mechanisms = [
|
||||
const steps = [
|
||||
{
|
||||
key: 'csrf-token',
|
||||
icon: '🎫',
|
||||
name: 'CSRF Token',
|
||||
title: 'CSRF Token 验证',
|
||||
subtitle: '在每个请求中添加随机 Token，服务端验证',
|
||||
steps: [
|
||||
'用户访问页面时，服务端生成随机 CSRF Token',
|
||||
'Token 存储在 Session 中，并返回给前端',
|
||||
'前端在表单中加入隐藏字段：<input type="hidden" name="csrf_token" value="...">',
|
||||
'提交表单时，服务端验证 Token 是否匹配',
|
||||
'Token 只能用一次，验证后立即失效'
|
||||
],
|
||||
code: `// 后端生成 Token
|
||||
app.get('/form', (req, res) => {
|
||||
const token = generateRandomToken()
|
||||
req.session.csrf_token = token
|
||||
res.render('form', { csrf_token: token })
|
||||
})
|
||||
|
||||
// 验证 Token
|
||||
app.post('/transfer', (req, res) => {
|
||||
if (req.body.csrf_token !== req.session.csrf_token) {
|
||||
return res.status(403).send('CSRF Token 无效')
|
||||
}
|
||||
// 执行转账
|
||||
})`,
|
||||
pros: [
|
||||
'✅ 最有效的 CSRF 防御方法',
|
||||
'✅ Token 随机生成，攻击者无法预测',
|
||||
'✅ 每次请求验证，安全性高'
|
||||
],
|
||||
cons: ['⚠️ 需要在每个表单中添加 Token', '⚠️ 增加开发和维护成本']
|
||||
title: '1) 恶意站点发起跨站请求',
|
||||
desc: 'evil.com 诱导你点击按钮/加载图片/提交表单，目标是 bank.com 的转账接口。'
|
||||
},
|
||||
{
|
||||
key: 'samesite',
|
||||
icon: '🍪',
|
||||
name: 'SameSite Cookie',
|
||||
title: 'SameSite Cookie 属性',
|
||||
subtitle: '限制 Cookie 在跨站请求时发送',
|
||||
steps: [
|
||||
'设置 Cookie 的 SameSite 属性',
|
||||
'SameSite=Strict：只在同一站点请求时发送',
|
||||
'SameSite=Lax：允许安全的跨站请求（如链接跳转）',
|
||||
'浏览器自动阻止跨站请求携带 Cookie',
|
||||
'无需修改应用代码'
|
||||
],
|
||||
code: `// 设置 SameSite Cookie
|
||||
app.use(session({
|
||||
secret: 'your-secret',
|
||||
cookie: {
|
||||
sameSite: 'strict', // 或 'lax'
|
||||
secure: true, // 只在 HTTPS 下传输
|
||||
httpOnly: true // 防止 JavaScript 读取
|
||||
}
|
||||
}))`,
|
||||
pros: [
|
||||
'✅ 简单易用，只需设置 Cookie 属性',
|
||||
'✅ 浏览器原生支持，无需修改应用逻辑',
|
||||
'✅ 与其他防御方法兼容'
|
||||
],
|
||||
cons: ['⚠️ 老版本浏览器不支持', '⚠️ 可能影响某些合法的跨站请求']
|
||||
title: '2) 浏览器自动带上 bank.com 的 Cookie',
|
||||
desc: '关键点：Cookie 是“按域名自动携带”的，evil.com 不需要知道你的 session_id。'
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
icon: '🎫',
|
||||
name: '使用 JWT',
|
||||
title: 'JWT 替代 Cookie',
|
||||
subtitle: '将 Token 存储在 localStorage，不使用 Cookie',
|
||||
steps: [
|
||||
'用户登录后，服务端生成 JWT',
|
||||
'前端将 JWT 存储在 localStorage',
|
||||
'每次请求在 Header 中携带：Authorization: Bearer <token>',
|
||||
'localStorage 的内容不会自动发送',
|
||||
'天然防 CSRF 攻击'
|
||||
],
|
||||
code: `// 前端存储 JWT
|
||||
localStorage.setItem('token', jwt_token)
|
||||
|
||||
// 发送请求时携带
|
||||
fetch('/api/data', {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||||
}
|
||||
})`,
|
||||
pros: [
|
||||
'✅ 天然防 CSRF，Cookie 不自动携带',
|
||||
'✅ 适合前后端分离和移动端',
|
||||
'✅ 易于实现'
|
||||
],
|
||||
cons: [
|
||||
'⚠️ 容易受到 XSS 攻击',
|
||||
'⚠️ 需要额外防范 XSS（HttpOnly Cookie 无法用）'
|
||||
]
|
||||
title: '3) 服务端如果只靠 Cookie 识别用户，会误以为是你本人操作',
|
||||
desc: '如果 bank.com 没做 CSRF 防护，转账可能被执行。'
|
||||
},
|
||||
{
|
||||
title: '4) 加上 CSRF 防护后，请求会被拒绝',
|
||||
desc: 'SameSite/CSRF Token 等会阻断这类跨站伪造请求。'
|
||||
}
|
||||
]
|
||||
|
||||
const currentMechanism = computed(() => {
|
||||
return mechanisms.find((m) => m.key === selectedMechanism.value)
|
||||
const requestText = computed(() => {
|
||||
if (step.value === 0) return '（点击开始）'
|
||||
if (step.value === 1) {
|
||||
return `POST https://bank.com/api/transfer
|
||||
Origin: https://evil.com
|
||||
Content-Type: application/x-www-form-urlencoded
|
||||
|
||||
to=attacker&amount=1000`
|
||||
}
|
||||
if (step.value === 2) {
|
||||
return `POST /api/transfer
|
||||
Origin: https://evil.com
|
||||
Cookie: session_id=abc123
|
||||
|
||||
to=attacker&amount=1000`
|
||||
}
|
||||
if (step.value === 3) {
|
||||
return `（如果服务端只校验 Cookie：可能返回 200 OK 并执行转账）`
|
||||
}
|
||||
return `POST /api/transfer
|
||||
Origin: https://evil.com
|
||||
Cookie: session_id=abc123
|
||||
X-CSRF-Token: <missing or invalid>
|
||||
|
||||
→ 403 Forbidden`
|
||||
})
|
||||
|
||||
const performTransfer = () => {
|
||||
if (!isLoggedIn.value) return
|
||||
alert('正常转账：转账成功')
|
||||
const start = () => {
|
||||
step.value = 1
|
||||
}
|
||||
|
||||
const triggerAttack = () => {
|
||||
attackTriggered.value = true
|
||||
const next = () => {
|
||||
step.value = Math.min(maxStep, step.value + 1)
|
||||
}
|
||||
|
||||
if (isLoggedIn.value) {
|
||||
attackResult.value = {
|
||||
type: 'danger',
|
||||
icon: '⚠️',
|
||||
text: 'CSRF 攻击成功！浏览器自动带上了银行的 Cookie，转账请求被发送。'
|
||||
}
|
||||
} else {
|
||||
attackResult.value = {
|
||||
type: 'warning',
|
||||
icon: '🛡️',
|
||||
text: '攻击失败：用户未登录银行网站。'
|
||||
}
|
||||
}
|
||||
const prev = () => {
|
||||
step.value = Math.max(1, step.value - 1)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
step.value = 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.csrf-defense-demo {
|
||||
.csrf-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.attack-demo {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.attack-scenario {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.scenario-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scenario-box.good-site {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.scenario-box.evil-site {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.box-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
font-size: 1.5rem;
|
||||
.btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.progress {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.box-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
.mono {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.login-status {
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.login-status.logged {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-btn.login {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.transfer {
|
||||
background: #22c55e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.evil-btn {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cookie-info {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.cookie-item {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cookie-key {
|
||||
color: #3b82f6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cookie-value {
|
||||
color: var(--vp-c-text-2);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.scenario-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-2);
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
.evil-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.evil-content p {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.evil-code {
|
||||
background: #1e293b;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
.code {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.attack-result {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-box.danger {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid #ef4444;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.result-box.warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border: 1px solid #f59e0b;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.defense-mechanisms {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.mechanisms-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mechanism-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.mechanism-content {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.mechanism-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.mechanism-demo {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.demo-flow {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.code-example {
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.code-example .code-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.code-example .code-block {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.mechanism-pros-cons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pros,
|
||||
.cons {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pros ul,
|
||||
.cons ul {
|
||||
.list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
padding-left: 1.2rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.pros li,
|
||||
.cons li {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead th {
|
||||
.warn {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.85rem;
|
||||
.warn-title {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
.warn-text {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.attack-scenario {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.scenario-arrow {
|
||||
writing-mode: horizontal-tb;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.mechanism-tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mechanism-pros-cons {
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,687 +1,361 @@
|
||||
<!--
|
||||
JWTWorkflowDemo.vue
|
||||
JWT 工作流程演示
|
||||
JWT 工作流程（手动推进，更贴近真实使用）
|
||||
-->
|
||||
<template>
|
||||
<div class="jwt-workflow-demo">
|
||||
<div class="header">
|
||||
<div class="title">JWT 工作流程</div>
|
||||
<div class="subtitle">JSON Web Token 的生成与验证</div>
|
||||
<div class="title">🎫 JWT：生成 → 发送 → 验证 → 解析</div>
|
||||
<div class="subtitle">
|
||||
默认“手动推进”，不自动下一步；避免把演示误当成真实系统的安全边界。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="generateToken"
|
||||
:disabled="isProcessing"
|
||||
>
|
||||
<span class="btn-icon">🔑</span>
|
||||
<span class="btn-text">生成 Token</span>
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="verifyToken"
|
||||
:disabled="!generatedToken || isProcessing"
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
>
|
||||
<span class="btn-icon">✅</span>
|
||||
<span class="btn-text">验证 Token</span>
|
||||
</button>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="decodeToken"
|
||||
:disabled="!generatedToken || isProcessing"
|
||||
>
|
||||
<span class="btn-icon">🔓</span>
|
||||
<span class="btn-text">解析 Payload</span>
|
||||
</button>
|
||||
<button
|
||||
class="action-btn reset"
|
||||
@click="resetDemo"
|
||||
:disabled="isProcessing"
|
||||
>
|
||||
<span class="btn-icon">🔄</span>
|
||||
<span class="btn-text">重置</span>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-area">
|
||||
<div class="user-info">
|
||||
<div class="info-title">用户信息</div>
|
||||
<div class="info-content">
|
||||
<div class="info-row">
|
||||
<span class="info-key">用户 ID:</span>
|
||||
<span class="info-value">123</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-key">用户名:</span>
|
||||
<span class="info-value">alice</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-key">角色:</span>
|
||||
<span class="info-value">admin</span>
|
||||
</div>
|
||||
<div v-if="step > 0" class="progress">
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">用户声明（Payload 示例）</div>
|
||||
<pre class="code"><code>{{ payloadJson }}</code></pre>
|
||||
<div class="hint">
|
||||
注意：JWT 的 payload 只是 Base64Url
|
||||
编码，任何人都能解码，所以不要放密码、手机号等敏感数据。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="token-display" v-if="generatedToken">
|
||||
<div class="token-title">生成的 JWT</div>
|
||||
<div class="token-parts">
|
||||
<div class="token-part header" @click="showPart = 'header'">
|
||||
<div class="card">
|
||||
<div class="card-title">JWT Token（示意）</div>
|
||||
<div class="token">
|
||||
<div class="part" :class="{ active: step >= 1 }">
|
||||
<div class="part-label">Header</div>
|
||||
<div class="part-content">{{ tokenParts.header }}</div>
|
||||
<code class="mono">{{ step >= 1 ? headerB64 : '...' }}</code>
|
||||
</div>
|
||||
<div class="token-divider">.</div>
|
||||
<div class="token-part payload" @click="showPart = 'payload'">
|
||||
<div class="dot">.</div>
|
||||
<div class="part" :class="{ active: step >= 2 }">
|
||||
<div class="part-label">Payload</div>
|
||||
<div class="part-content">{{ tokenParts.payload }}</div>
|
||||
<code class="mono">{{ step >= 2 ? payloadB64 : '...' }}</code>
|
||||
</div>
|
||||
<div class="token-divider">.</div>
|
||||
<div class="token-part signature" @click="showPart = 'signature'">
|
||||
<div class="dot">.</div>
|
||||
<div class="part" :class="{ active: step >= 3 }">
|
||||
<div class="part-label">Signature</div>
|
||||
<div class="part-content">{{ tokenParts.signature }}</div>
|
||||
<code class="mono">{{ step >= 3 ? signatureB64 : '...' }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="token-full" v-if="showFull">
|
||||
<div class="full-title">完整 Token</div>
|
||||
<div class="full-content">{{ generatedToken }}</div>
|
||||
<div class="mono-box" v-if="step >= 4">
|
||||
<div class="mono-label">完整 Token</div>
|
||||
<code class="mono">{{ token }}</code>
|
||||
<button class="copy" @click="copy(token)">
|
||||
{{ copied ? '已复制' : '复制 Token' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="toggle-btn" @click="showFull = !showFull">
|
||||
{{ showFull ? '隐藏' : '显示' }}完整 Token
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="part-detail" v-if="showPart && partDetail">
|
||||
<div class="detail-title">
|
||||
{{
|
||||
showPart === 'header'
|
||||
? 'Header'
|
||||
: showPart === 'payload'
|
||||
? 'Payload'
|
||||
: 'Signature'
|
||||
}}
|
||||
详情
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<pre class="detail-json">{{ partDetail }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-box" v-if="result" :class="result.type">
|
||||
<div class="result-icon">{{ result.icon }}</div>
|
||||
<div class="result-text">{{ result.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="jwt-structure">
|
||||
<div class="structure-title">JWT 结构</div>
|
||||
<div class="structure-diagram">
|
||||
<div class="diagram-part">
|
||||
<div class="part-name">Header</div>
|
||||
<div class="part-desc">算法信息</div>
|
||||
<div class="part-example">{"alg": "HS256", "typ": "JWT"}</div>
|
||||
</div>
|
||||
<div class="diagram-plus">+</div>
|
||||
<div class="diagram-part">
|
||||
<div class="part-name">Payload</div>
|
||||
<div class="part-desc">用户信息</div>
|
||||
<div class="part-example">{"user_id": 123, "role": "admin"}</div>
|
||||
</div>
|
||||
<div class="diagram-plus">+</div>
|
||||
<div class="diagram-part">
|
||||
<div class="part-name">Signature</div>
|
||||
<div class="part-desc">签名（防篡改）</div>
|
||||
<div class="part-example">
|
||||
HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload),
|
||||
secret)
|
||||
</div>
|
||||
<div class="mono-box" v-if="step >= 5">
|
||||
<div class="mono-label">请求头示例</div>
|
||||
<code class="mono">Authorization: Bearer {{ token }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-cards">
|
||||
<div class="info-card pros">
|
||||
<div class="card-icon">✅</div>
|
||||
<div class="card-title">优点</div>
|
||||
<ul class="card-list">
|
||||
<li>无状态，服务端不存储</li>
|
||||
<li>易于横向扩展</li>
|
||||
<li>跨域友好</li>
|
||||
<li>移动端友好</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-card cons">
|
||||
<div class="card-icon">⚠️</div>
|
||||
<div class="card-title">缺点</div>
|
||||
<ul class="card-list">
|
||||
<li>无法主动注销</li>
|
||||
<li>Payload 可见，不能存敏感信息</li>
|
||||
<li>Token 过大，每次请求都要带上</li>
|
||||
</ul>
|
||||
<div class="card">
|
||||
<div class="card-title">{{ steps[step - 1]?.title || '流程说明' }}</div>
|
||||
<div class="desc">{{ steps[step - 1]?.desc }}</div>
|
||||
<div v-if="steps[step - 1]?.warn" class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-text">{{ steps[step - 1]?.warn }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const isProcessing = ref(false)
|
||||
const generatedToken = ref('')
|
||||
const showFull = ref(false)
|
||||
const showPart = ref(null)
|
||||
const result = ref(null)
|
||||
const maxStep = 6
|
||||
const step = ref(0)
|
||||
const copied = ref(false)
|
||||
|
||||
const tokenParts = ref({
|
||||
header: '',
|
||||
payload: '',
|
||||
signature: ''
|
||||
})
|
||||
const headerObj = { alg: 'HS256', typ: 'JWT' }
|
||||
const payloadObj = computed(() => ({
|
||||
user_id: 123,
|
||||
username: 'alice',
|
||||
role: 'admin',
|
||||
iat: Math.floor(Date.now() / 1000),
|
||||
exp: Math.floor(Date.now() / 1000) + 3600
|
||||
}))
|
||||
|
||||
const partDetail = computed(() => {
|
||||
if (showPart.value === 'header') {
|
||||
return JSON.stringify({ alg: 'HS256', typ: 'JWT' }, null, 2)
|
||||
} else if (showPart.value === 'payload') {
|
||||
return JSON.stringify(
|
||||
{
|
||||
user_id: 123,
|
||||
username: 'alice',
|
||||
role: 'admin',
|
||||
iat: Math.floor(Date.now() / 1000),
|
||||
exp: Math.floor(Date.now() / 1000) + 3600
|
||||
},
|
||||
null,
|
||||
2
|
||||
)
|
||||
} else if (showPart.value === 'signature') {
|
||||
return 'HMACSHA256(\n base64UrlEncode(header) + "." + base64UrlEncode(payload),\n your-secret-key\n)'
|
||||
const payloadJson = computed(() => JSON.stringify(payloadObj.value, null, 2))
|
||||
const headerB64 = computed(() => btoa(JSON.stringify(headerObj)))
|
||||
const payloadB64 = computed(() => btoa(JSON.stringify(payloadObj.value)))
|
||||
const signatureB64 = computed(() =>
|
||||
btoa(`${headerB64.value}.${payloadB64.value}.your-secret-key`)
|
||||
)
|
||||
const token = computed(
|
||||
() => `${headerB64.value}.${payloadB64.value}.${signatureB64.value}`
|
||||
)
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: '1) 生成 Header',
|
||||
desc: 'Header 描述使用的算法与 token 类型（JWT）。'
|
||||
},
|
||||
{
|
||||
title: '2) 生成 Payload',
|
||||
desc: 'Payload 放业务声明（claims）。它可被解码，所以不要放敏感信息。'
|
||||
},
|
||||
{
|
||||
title: '3) 生成 Signature',
|
||||
desc: 'Signature 用密钥对 header.payload 做签名，用来防篡改。',
|
||||
warn: '只有“签名校验”能保证 payload 未被改过；Base64 不是加密。'
|
||||
},
|
||||
{
|
||||
title: '4) 拼接 Token',
|
||||
desc: '把三段用 “.” 连接：header.payload.signature。'
|
||||
},
|
||||
{
|
||||
title: '5) 客户端发送请求',
|
||||
desc: '通常放在 Authorization: Bearer <token>。'
|
||||
},
|
||||
{
|
||||
title: '6) 服务端验证与授权',
|
||||
desc: '服务端校验签名与过期时间，再按 role/权限做授权判断。',
|
||||
warn: 'JWT 无法“立刻全局注销”：常用解法是短 access token + refresh token + 黑名单/版本号。'
|
||||
}
|
||||
return null
|
||||
})
|
||||
]
|
||||
|
||||
const generateToken = async () => {
|
||||
isProcessing.value = true
|
||||
result.value = null
|
||||
|
||||
// 模拟生成 JWT
|
||||
const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }))
|
||||
const payload = btoa(
|
||||
JSON.stringify({
|
||||
user_id: 123,
|
||||
username: 'alice',
|
||||
role: 'admin',
|
||||
iat: Math.floor(Date.now() / 1000),
|
||||
exp: Math.floor(Date.now() / 1000) + 3600
|
||||
})
|
||||
)
|
||||
const signature = btoa(`${header}.${payload}.your-secret-key`)
|
||||
|
||||
tokenParts.value = {
|
||||
header: header.substring(0, 20) + '...',
|
||||
payload: payload.substring(0, 20) + '...',
|
||||
signature: signature.substring(0, 20) + '...'
|
||||
}
|
||||
|
||||
generatedToken.value = `${header}.${payload}.${signature}`
|
||||
|
||||
await delay(800)
|
||||
|
||||
result.value = {
|
||||
type: 'success',
|
||||
icon: '✅',
|
||||
text: 'Token 生成成功！有效期 1 小时'
|
||||
}
|
||||
|
||||
isProcessing.value = false
|
||||
const start = () => {
|
||||
step.value = 1
|
||||
}
|
||||
|
||||
const verifyToken = async () => {
|
||||
isProcessing.value = true
|
||||
const next = () => {
|
||||
step.value = Math.min(maxStep, step.value + 1)
|
||||
}
|
||||
|
||||
await delay(800)
|
||||
const prev = () => {
|
||||
step.value = Math.max(1, step.value - 1)
|
||||
}
|
||||
|
||||
// 模拟验证
|
||||
const isValid = Math.random() > 0.2
|
||||
const reset = () => {
|
||||
step.value = 0
|
||||
copied.value = false
|
||||
}
|
||||
|
||||
result.value = {
|
||||
type: isValid ? 'success' : 'error',
|
||||
icon: isValid ? '✅' : '❌',
|
||||
text: isValid ? 'Token 验证通过！签名有效' : 'Token 验证失败：签名无效'
|
||||
const copy = async (text) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
copied.value = true
|
||||
setTimeout(() => {
|
||||
copied.value = false
|
||||
}, 800)
|
||||
} catch {
|
||||
copied.value = false
|
||||
}
|
||||
|
||||
isProcessing.value = false
|
||||
}
|
||||
|
||||
const decodeToken = async () => {
|
||||
isProcessing.value = true
|
||||
|
||||
await delay(600)
|
||||
|
||||
showPart.value = 'payload'
|
||||
|
||||
result.value = {
|
||||
type: 'info',
|
||||
icon: '🔓',
|
||||
text: 'Payload 已解析（Base64 可解码，不要存敏感信息！）'
|
||||
}
|
||||
|
||||
isProcessing.value = false
|
||||
}
|
||||
|
||||
const resetDemo = () => {
|
||||
generatedToken.value = ''
|
||||
tokenParts.value = { header: '', payload: '', signature: '' }
|
||||
showFull.value = false
|
||||
showPart.value = null
|
||||
result.value = null
|
||||
}
|
||||
|
||||
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.jwt-workflow-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
.btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.action-btn.reset {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
.action-btn.reset:hover:not(:disabled) {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.demo-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.info-key {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand);
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--vp-c-text-1);
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.token-display {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.token-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.token-parts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.token-part {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.token-part:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.token-part.header {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.token-part.payload {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
border-color: #a855f7;
|
||||
}
|
||||
|
||||
.token-part.signature {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.part-label {
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.part-content {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.7rem;
|
||||
.progress {
|
||||
color: var(--vp-c-text-2);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.token-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.token-full {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: #1e293b;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.full-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.full-content {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: #e2e8f0;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.part-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.detail-json {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #e2e8f0;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-box.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid #22c55e;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.result-box.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid #ef4444;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.result-box.info {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid #3b82f6;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.jwt-structure {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.structure-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.structure-diagram {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.diagram-part {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.part-name {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.part-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.part-example {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.diagram-plus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-list {
|
||||
.code {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.card-list li {
|
||||
margin-bottom: 0.5rem;
|
||||
.hint {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.token {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.part {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.part.active {
|
||||
opacity: 1;
|
||||
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
|
||||
}
|
||||
|
||||
.part-label {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: var(--vp-c-text-1);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-card.pros .card-list li {
|
||||
color: #16a34a;
|
||||
.mono-box {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.info-card.cons .card-list li {
|
||||
color: #dc2626;
|
||||
.mono-label {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.structure-diagram {
|
||||
flex-direction: column;
|
||||
}
|
||||
.copy {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.diagram-plus {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.desc {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
.warn {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.warn-title {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.warn-text {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,673 +1,346 @@
|
||||
<!--
|
||||
OAuth2FlowDemo.vue
|
||||
OAuth 2.0 授权流程演示
|
||||
OAuth2 / OIDC 授权码流程（手动推进，更贴近真实接入）
|
||||
-->
|
||||
<template>
|
||||
<div class="oauth2-flow-demo">
|
||||
<div class="oauth2-demo">
|
||||
<div class="header">
|
||||
<div class="title">OAuth 2.0 授权码流程</div>
|
||||
<div class="subtitle">第三方登录（如微信登录）的完整流程</div>
|
||||
<div class="title">🔑 OAuth2：第三方登录（授权码流程）</div>
|
||||
<div class="subtitle">
|
||||
用最常见的 Authorization Code Flow（建议配合
|
||||
PKCE）。默认手动推进，不自动下一步。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="startFlow"
|
||||
:disabled="isProcessing || currentStep > 0"
|
||||
>
|
||||
<span class="btn-icon">🚀</span>
|
||||
<span class="btn-text">开始授权流程</span>
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="nextStep"
|
||||
:disabled="isProcessing || currentStep === 0 || currentStep >= maxSteps"
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
>
|
||||
<span class="btn-icon">➡️</span>
|
||||
<span class="btn-text">下一步</span>
|
||||
下一步
|
||||
</button>
|
||||
<button
|
||||
class="action-btn reset"
|
||||
@click="resetFlow"
|
||||
:disabled="isProcessing"
|
||||
>
|
||||
<span class="btn-icon">🔄</span>
|
||||
<span class="btn-text">重置</span>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
<button class="btn" @click="copy(currentCmd)" :disabled="!currentCmd">
|
||||
{{ copied ? '已复制' : '复制命令' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flow-visualization">
|
||||
<div class="actors">
|
||||
<div class="actor user" :class="{ active: isUserActive }">
|
||||
<div class="actor-icon">👤</div>
|
||||
<div class="actor-label">用户</div>
|
||||
</div>
|
||||
<div v-if="step > 0" class="progress">
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="actor client" :class="{ active: isClientActive }">
|
||||
<div class="actor-icon">🌐</div>
|
||||
<div class="actor-label">第三方应用</div>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">角色</div>
|
||||
<div class="role">
|
||||
<div class="pill">Client（你的应用）</div>
|
||||
<div class="pill">Authorization Server（微信/Google 等）</div>
|
||||
<div class="pill">Resource Server（你的 API）</div>
|
||||
</div>
|
||||
|
||||
<div class="actor auth-server" :class="{ active: isAuthServerActive }">
|
||||
<div class="actor-icon">🔐</div>
|
||||
<div class="actor-label">授权服务器</div>
|
||||
<div class="actor-sub">微信/Google</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="actor resource-server"
|
||||
:class="{ active: isResourceServerActive }"
|
||||
>
|
||||
<div class="actor-icon">📊</div>
|
||||
<div class="actor-label">资源服务器</div>
|
||||
<div class="actor-sub">用户信息 API</div>
|
||||
<div class="desc">
|
||||
OAuth2
|
||||
的核心：<strong>你的应用不再保存用户在第三方的密码</strong>，而是拿到授权码/令牌后去换取用户信息。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="current-action" v-if="currentAction">
|
||||
<div class="action-icon">{{ currentAction.icon }}</div>
|
||||
<div class="action-text">{{ currentAction.text }}</div>
|
||||
<div class="action-detail" v-if="currentAction.detail">
|
||||
{{ currentAction.detail }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-exchange" v-if="currentDataExchange">
|
||||
<div class="exchange-title">数据交换</div>
|
||||
<div class="exchange-content">
|
||||
<div
|
||||
class="exchange-item"
|
||||
v-for="(item, index) in currentDataExchange"
|
||||
:key="index"
|
||||
>
|
||||
<span class="exchange-label">{{ item.label }}:</span>
|
||||
<span class="exchange-value">{{ item.value }}</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">本步要做什么</div>
|
||||
<div class="desc">{{ steps[step - 1]?.desc || '点击开始' }}</div>
|
||||
<div v-if="steps[step - 1]?.warn" class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-text">{{ steps[step - 1]?.warn }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-steps">
|
||||
<div class="steps-title">流程步骤</div>
|
||||
<div class="steps-list">
|
||||
<div
|
||||
v-for="(step, index) in flowSteps"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
:class="{
|
||||
active: currentStep === index + 1,
|
||||
completed: currentStep > index + 1,
|
||||
current: currentStep === index + 1
|
||||
}"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">请求/命令示例（可照抄）</div>
|
||||
<pre
|
||||
class="code"
|
||||
><code>{{ currentCmd || '（点击开始后显示）' }}</code></pre>
|
||||
<div class="hint">
|
||||
这是“示例请求”，不是你电脑上真实发出去的请求；你可以把参数替换成自己的
|
||||
client_id / redirect_uri。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="security-notes">
|
||||
<div class="notes-title">安全要点</div>
|
||||
<div class="notes-list">
|
||||
<div class="note-item">
|
||||
<div class="note-icon">🔒</div>
|
||||
<div class="note-content">
|
||||
<div class="note-title">code 只能用一次</div>
|
||||
<div class="note-text">授权码使用后立即失效，防止截获重放</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<div class="note-icon">🎲</div>
|
||||
<div class="note-content">
|
||||
<div class="note-title">state 防 CSRF</div>
|
||||
<div class="note-text">
|
||||
生成随机字符串，回调时验证，防止恶意网站伪造
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<div class="note-icon">🔗</div>
|
||||
<div class="note-content">
|
||||
<div class="note-title">redirect_uri 必须匹配</div>
|
||||
<div class="note-text">提前在授权服务器注册，防止重定向攻击</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="participants-table">
|
||||
<div class="table-title">OAuth 2.0 核心角色</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>角色</th>
|
||||
<th>说明</th>
|
||||
<th>例子</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Resource Owner</strong></td>
|
||||
<td>资源所有者（用户）</td>
|
||||
<td>你</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Client</strong></td>
|
||||
<td>第三方应用</td>
|
||||
<td>某个网站</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Authorization Server</strong></td>
|
||||
<td>授权服务器</td>
|
||||
<td>微信、Google</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Resource Server</strong></td>
|
||||
<td>资源服务器</td>
|
||||
<td>微信的用户信息 API</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card">
|
||||
<div class="card-title">你真正需要记住的 4 件事</div>
|
||||
<ul class="list">
|
||||
<li>
|
||||
<strong>redirect_uri 必须白名单：</strong>避免被人把 code
|
||||
劫持到自己的站。
|
||||
</li>
|
||||
<li><strong>state 必须校验：</strong>防 CSRF（登录也会被 CSRF）。</li>
|
||||
<li><strong>code 只能用一次且很快过期：</strong>泄露影响有限。</li>
|
||||
<li>
|
||||
<strong>access token 要短 + refresh token 要保护：</strong>refresh
|
||||
token 更像“长期钥匙”。
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isProcessing = ref(false)
|
||||
const maxSteps = 5
|
||||
const maxStep = 6
|
||||
const step = ref(0)
|
||||
const copied = ref(false)
|
||||
|
||||
const currentAction = ref(null)
|
||||
const currentDataExchange = ref(null)
|
||||
const params = {
|
||||
clientId: 'your_client_id',
|
||||
redirectUri: 'https://your.app/callback',
|
||||
scope: 'openid profile email',
|
||||
state: 'random_state_123',
|
||||
code: 'auth_code_xyz',
|
||||
codeVerifier: 'pkce_verifier_...',
|
||||
codeChallenge: 'pkce_challenge_...'
|
||||
}
|
||||
|
||||
const flowSteps = [
|
||||
const steps = [
|
||||
{
|
||||
title: '用户点击"使用微信登录"',
|
||||
desc: '第三方应用重定向到微信授权页面'
|
||||
title: '1) 跳转到授权页',
|
||||
desc: '你的应用把用户重定向到授权服务器，让用户登录并授权。',
|
||||
warn: 'redirect_uri 必须白名单；state 用于防 CSRF。'
|
||||
},
|
||||
{
|
||||
title: '用户扫码并同意授权',
|
||||
desc: '微信重定向回第三方应用，携带授权码 code'
|
||||
title: '2) 用户授权',
|
||||
desc: '用户在第三方确认“允许此应用读取基本信息”。（这一步发生在第三方页面）'
|
||||
},
|
||||
{
|
||||
title: '后端用 code 换取 access_token',
|
||||
desc: '第三方应用后端调用微信 API，使用 code 换取 token'
|
||||
title: '3) 带 code 回调',
|
||||
desc: '授权服务器把用户带回 redirect_uri，并附上一次性的授权码 code。'
|
||||
},
|
||||
{
|
||||
title: '用 access_token 获取用户信息',
|
||||
desc: '调用微信用户信息 API，获取用户数据'
|
||||
title: '4) 用 code 换 token',
|
||||
desc: '你的后端（或移动端 + PKCE）调用 token endpoint，把 code 换成 access token。'
|
||||
},
|
||||
{
|
||||
title: '创建或更新本地用户',
|
||||
desc: '第三方应用创建本地用户，生成本系统的 JWT'
|
||||
title: '5) 用 token 拉取用户信息',
|
||||
desc: '携带 access token 请求 userinfo（或你自己业务的资源服务）。'
|
||||
},
|
||||
{
|
||||
title: '6) 建立你自己的登录态',
|
||||
desc: 'OAuth2 只解决“第三方授权”，你的系统还要创建自己的 session/JWT（并做授权）。',
|
||||
warn: '不要把第三方 access token 当作你系统的权限 token；两者用途不同。'
|
||||
}
|
||||
]
|
||||
|
||||
const stepActions = {
|
||||
1: {
|
||||
icon: '👆',
|
||||
text: '用户点击授权按钮',
|
||||
detail: '重定向到微信授权页面',
|
||||
dataExchange: [
|
||||
{ label: 'URL', value: 'open.weixin.qq.com/connect/qrconnect' },
|
||||
{ label: 'appid', value: 'wx1234567890' },
|
||||
{ label: 'redirect_uri', value: 'https://yourapp.com/callback' },
|
||||
{ label: 'response_type', value: 'code' },
|
||||
{ label: 'state', value: 'random_state_string' }
|
||||
],
|
||||
activeActors: ['client', 'auth-server']
|
||||
},
|
||||
2: {
|
||||
icon: '✅',
|
||||
text: '用户同意授权',
|
||||
detail: '微信重定向回第三方应用',
|
||||
dataExchange: [
|
||||
{ label: 'Callback URL', value: 'https://yourapp.com/callback' },
|
||||
{ label: 'code', value: 'AUTHORIZATION_CODE' },
|
||||
{ label: 'state', value: 'random_state_string' }
|
||||
],
|
||||
activeActors: ['user', 'auth-server', 'client']
|
||||
},
|
||||
3: {
|
||||
icon: '🔄',
|
||||
text: '后端交换 Token',
|
||||
detail: '使用 code 换取 access_token',
|
||||
dataExchange: [
|
||||
{ label: 'POST', value: 'api.weixin.qq.com/sns/oauth2/access_token' },
|
||||
{ label: 'appid', value: 'wx1234567890' },
|
||||
{ label: 'secret', value: '***' },
|
||||
{ label: 'code', value: 'AUTHORIZATION_CODE' },
|
||||
{ label: 'grant_type', value: 'authorization_code' }
|
||||
],
|
||||
activeActors: ['client', 'auth-server']
|
||||
},
|
||||
4: {
|
||||
icon: '📊',
|
||||
text: '获取用户信息',
|
||||
detail: '使用 access_token 调用用户信息 API',
|
||||
dataExchange: [
|
||||
{ label: 'GET', value: 'api.weixin.qq.com/sns/userinfo' },
|
||||
{ label: 'access_token', value: 'ACCESS_TOKEN' },
|
||||
{ label: 'openid', value: 'USER_OPENID' },
|
||||
{ label: '返回', value: '{ nickname, headimgurl, ... }' }
|
||||
],
|
||||
activeActors: ['client', 'resource-server']
|
||||
},
|
||||
5: {
|
||||
icon: '🎉',
|
||||
text: '创建本地用户',
|
||||
detail: '生成第三方应用的 JWT Token',
|
||||
dataExchange: [
|
||||
{ label: '操作', value: '创建或更新本地用户' },
|
||||
{ label: '生成', value: '本地 JWT Token' },
|
||||
{ label: '返回', value: '{ token, user_info }' }
|
||||
],
|
||||
activeActors: ['client']
|
||||
const currentCmd = computed(() => {
|
||||
if (step.value === 0) return ''
|
||||
if (step.value === 1) {
|
||||
return `GET https://auth.server/authorize?response_type=code&client_id=${params.clientId}&redirect_uri=${encodeURIComponent(
|
||||
params.redirectUri
|
||||
)}&scope=${encodeURIComponent(params.scope)}&state=${params.state}&code_challenge=${params.codeChallenge}&code_challenge_method=S256`
|
||||
}
|
||||
if (step.value === 2) {
|
||||
return `（用户在授权页点击“同意/授权”）`
|
||||
}
|
||||
if (step.value === 3) {
|
||||
return `302 ${params.redirectUri}?code=${params.code}&state=${params.state}`
|
||||
}
|
||||
if (step.value === 4) {
|
||||
return `POST https://auth.server/token
|
||||
Content-Type: application/x-www-form-urlencoded
|
||||
|
||||
grant_type=authorization_code&
|
||||
code=${params.code}&
|
||||
redirect_uri=${encodeURIComponent(params.redirectUri)}&
|
||||
client_id=${params.clientId}&
|
||||
code_verifier=${params.codeVerifier}`
|
||||
}
|
||||
if (step.value === 5) {
|
||||
return `GET https://auth.server/userinfo
|
||||
Authorization: Bearer <access_token>`
|
||||
}
|
||||
return `你的后端：
|
||||
1) 读取 userinfo（拿到第三方 user_id）
|
||||
2) 在你系统里创建/绑定用户
|
||||
3) 返回你自己的 session cookie 或 JWT`
|
||||
})
|
||||
|
||||
const start = () => {
|
||||
step.value = 1
|
||||
}
|
||||
|
||||
const next = () => {
|
||||
step.value = Math.min(maxStep, step.value + 1)
|
||||
}
|
||||
|
||||
const prev = () => {
|
||||
step.value = Math.max(1, step.value - 1)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
step.value = 0
|
||||
copied.value = false
|
||||
}
|
||||
|
||||
const copy = async (text) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
copied.value = true
|
||||
setTimeout(() => {
|
||||
copied.value = false
|
||||
}, 800)
|
||||
} catch {
|
||||
copied.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const isUserActive = computed(() =>
|
||||
stepActions[currentStep.value]?.activeActors.includes('user')
|
||||
)
|
||||
const isClientActive = computed(() =>
|
||||
stepActions[currentStep.value]?.activeActors.includes('client')
|
||||
)
|
||||
const isAuthServerActive = computed(() =>
|
||||
stepActions[currentStep.value]?.activeActors.includes('auth-server')
|
||||
)
|
||||
const isResourceServerActive = computed(() =>
|
||||
stepActions[currentStep.value]?.activeActors.includes('resource-server')
|
||||
)
|
||||
|
||||
const startFlow = async () => {
|
||||
isProcessing.value = true
|
||||
currentStep.value = 1
|
||||
await executeStep(1)
|
||||
isProcessing.value = false
|
||||
}
|
||||
|
||||
const nextStep = async () => {
|
||||
if (currentStep.value >= maxSteps) return
|
||||
|
||||
isProcessing.value = true
|
||||
currentStep.value++
|
||||
await executeStep(currentStep.value)
|
||||
isProcessing.value = false
|
||||
}
|
||||
|
||||
const executeStep = async (step) => {
|
||||
const action = stepActions[step]
|
||||
currentAction.value = {
|
||||
icon: action.icon,
|
||||
text: action.text,
|
||||
detail: action.detail
|
||||
}
|
||||
currentDataExchange.value = action.dataExchange
|
||||
|
||||
await delay(1500)
|
||||
}
|
||||
|
||||
const resetFlow = () => {
|
||||
currentStep.value = 0
|
||||
currentAction.value = null
|
||||
currentDataExchange.value = null
|
||||
}
|
||||
|
||||
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.oauth2-flow-demo {
|
||||
.oauth2-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
.btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.action-btn.reset {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
.action-btn.reset:hover:not(:disabled) {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.flow-visualization {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.actors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.actor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.actor.active {
|
||||
opacity: 1;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.actor-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.actor-label {
|
||||
font-weight: 600;
|
||||
.progress {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.actor-sub {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.current-action {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.data-exchange {
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.exchange-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.exchange-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.exchange-item {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.exchange-label {
|
||||
color: #94a3b8;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.exchange-value {
|
||||
color: #e2e8f0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.steps-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.step-item.completed {
|
||||
opacity: 0.6;
|
||||
.card-title {
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.step-item.current {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
.role {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
flex-shrink: 0;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
.pill {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border-radius: 999px;
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
.desc {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.warn {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.warn-title {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.85rem;
|
||||
.warn-text {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.security-notes {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
.code {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.notes-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.note-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.note-title {
|
||||
font-weight: 600;
|
||||
.hint {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.25rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.note-text {
|
||||
font-size: 0.85rem;
|
||||
.list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.participants-table {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead th {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.actors {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.exchange-item {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.exchange-label {
|
||||
min-width: auto;
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,699 +1,405 @@
|
||||
<!--
|
||||
PasswordHashingDemo.vue
|
||||
密码哈希演示
|
||||
密码哈希/加密学派生函数演示（更安全/更可用）
|
||||
|
||||
说明：
|
||||
- 为避免引入第三方依赖（bcryptjs）导致构建失败，本组件用 WebCrypto 的 PBKDF2 来模拟“慢哈希 + 盐”的核心效果。
|
||||
- 生产环境更推荐 bcrypt / scrypt / Argon2（取决于语言/库），本演示只讲原理。
|
||||
-->
|
||||
<template>
|
||||
<div class="password-hashing-demo">
|
||||
<div class="header">
|
||||
<div class="title">密码哈希：为什么不能存明文？</div>
|
||||
<div class="subtitle">理解 bcrypt 和彩虹表攻击</div>
|
||||
<div class="title">🔐 密码存储：哈希 + 盐 + 慢</div>
|
||||
<div class="subtitle">
|
||||
演示 PBKDF2（模拟慢哈希）如何抵抗彩虹表/暴力破解；真实项目通常选
|
||||
bcrypt/Argon2。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="password-input">
|
||||
<label>输入密码</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="text"
|
||||
placeholder="输入密码..."
|
||||
@input="updateHash"
|
||||
/>
|
||||
<button class="generate-btn" @click="updateHash">
|
||||
<span class="btn-icon">🔐</span>
|
||||
<span class="btn-text">生成哈希</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">输入</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="comparison-card bad">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">❌</div>
|
||||
<div class="card-title">错误做法</div>
|
||||
<label class="label">密码</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="input"
|
||||
placeholder="例如：123456"
|
||||
@input="debouncedRecompute"
|
||||
/>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label class="label">
|
||||
iterations（迭代次数）：<strong>{{ iterations }}</strong>
|
||||
</label>
|
||||
<input
|
||||
v-model.number="iterations"
|
||||
class="range"
|
||||
type="range"
|
||||
min="1000"
|
||||
max="200000"
|
||||
step="1000"
|
||||
@input="debouncedRecompute"
|
||||
/>
|
||||
<div class="hint">越大越慢，暴力破解成本越高（但登录也更慢）。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-selector">
|
||||
<button
|
||||
v-for="method in badMethods"
|
||||
:key="method.key"
|
||||
class="method-btn"
|
||||
:class="{ active: selectedBadMethod === method.key }"
|
||||
@click="selectedBadMethod = method.key"
|
||||
>
|
||||
{{ method.name }}
|
||||
<div class="row">
|
||||
<label class="toggle">
|
||||
<input v-model="saltEnabled" type="checkbox" @change="recompute" />
|
||||
<span>启用盐（salt）</span>
|
||||
</label>
|
||||
<button class="btn" @click="regenSalt" :disabled="!saltEnabled">
|
||||
生成新盐
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hash-result">
|
||||
<div class="result-label">哈希结果</div>
|
||||
<div class="result-value">{{ badHashResult }}</div>
|
||||
</div>
|
||||
|
||||
<div class="security-info">
|
||||
<div class="info-title">安全问题</div>
|
||||
<ul class="info-list">
|
||||
<li v-for="(issue, index) in badMethodIssues" :key="index">
|
||||
{{ issue }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">salt</div>
|
||||
<code class="mono">{{ saltEnabled ? saltHex : '(disabled)' }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">VS</div>
|
||||
<div class="card">
|
||||
<div class="card-title">输出（模拟）</div>
|
||||
|
||||
<div class="comparison-card good">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">✅</div>
|
||||
<div class="card-title">正确做法</div>
|
||||
<div class="status">
|
||||
<span class="badge">Algorithm: PBKDF2-SHA256</span>
|
||||
<span class="badge">Time: {{ timeMs }}ms</span>
|
||||
</div>
|
||||
|
||||
<div class="method-selector">
|
||||
<button class="method-btn active">bcrypt</button>
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">derived key (hex)</div>
|
||||
<code class="mono">{{ hashHex || '（请输入密码）' }}</code>
|
||||
</div>
|
||||
|
||||
<div class="hash-result">
|
||||
<div class="result-label">bcrypt 哈希</div>
|
||||
<div class="result-value">{{ bcryptHashResult }}</div>
|
||||
</div>
|
||||
|
||||
<div class="security-info">
|
||||
<div class="info-title">安全特性</div>
|
||||
<ul class="info-list">
|
||||
<li>🐌 慢哈希：故意设计得很慢，防暴力破解</li>
|
||||
<li>🎲 自适应：可调整 rounds，随硬件变强而增强</li>
|
||||
<li>🧂 自带加盐：每个密码都有随机盐，防彩虹表</li>
|
||||
<li>🔒 单向加密：无法反向解密</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounds-control">
|
||||
<label>
|
||||
rounds (复杂度): <strong>{{ rounds }}</strong>
|
||||
</label>
|
||||
<input
|
||||
v-model="rounds"
|
||||
type="range"
|
||||
min="4"
|
||||
max="14"
|
||||
step="1"
|
||||
@input="updateHash"
|
||||
/>
|
||||
<div class="rounds-info">当前耗时: {{ hashTime }} ms</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rainbow-table">
|
||||
<div class="section-title">彩虹表攻击演示</div>
|
||||
<div class="rainbow-content">
|
||||
<div class="rainbow-explanation">
|
||||
<div class="explanation-text">
|
||||
<p><strong>什么是彩虹表？</strong></p>
|
||||
<p>
|
||||
彩虹表是一个预先计算好的哈希值字典，包含常见密码及其哈希结果。攻击者可以通过查询彩虹表快速破解密码。
|
||||
</p>
|
||||
<p><strong>为什么需要盐？</strong></p>
|
||||
<p>
|
||||
盐（salt）是随机字符串，在每个密码哈希时加入。即使两个用户使用相同的密码，由于盐不同，哈希结果也不同。这使得彩虹表失效。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rainbow-demo">
|
||||
<div class="demo-title">彩虹表示例（MD5，无盐）</div>
|
||||
<div class="rainbow-table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>密码</th>
|
||||
<th>MD5 哈希</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in rainbowTable" :key="index">
|
||||
<td>{{ item.password }}</td>
|
||||
<td class="hash">{{ item.hash }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="lookup-demo">
|
||||
<div class="lookup-title">哈希查询</div>
|
||||
<div class="lookup-input">
|
||||
<input
|
||||
v-model="lookupHash"
|
||||
type="text"
|
||||
placeholder="粘贴 MD5 哈希值..."
|
||||
/>
|
||||
<button class="lookup-btn" @click="lookupPassword">查询</button>
|
||||
</div>
|
||||
<div class="lookup-result" v-if="lookupResult">
|
||||
<div class="result-text">
|
||||
{{ lookupResult }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert">
|
||||
<div class="alert-title">结论</div>
|
||||
<div class="alert-text">
|
||||
不要存明文；不要用无盐的快速哈希（MD5/SHA1/SHA256 直接 hash 密码）。
|
||||
应使用“专门的密码哈希/KDF（慢 + 盐）”，并设置合理成本。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="best-practices">
|
||||
<div class="practices-title">最佳实践</div>
|
||||
<div class="practices-list">
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">✅</div>
|
||||
<div class="practice-content">
|
||||
<strong>使用 bcrypt、scrypt 或 Argon2</strong>
|
||||
<p>这些是专门为密码设计的哈希算法，具有抗暴力破解的特性。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
🌈 彩虹表为什么会失效？（同一密码 + 不同盐 → 不同结果）
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">salt A</div>
|
||||
<code class="mono">{{ saltA }}</code>
|
||||
<div class="mono-label">hash A</div>
|
||||
<code class="mono">{{ hashA || '-' }}</code>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">✅</div>
|
||||
<div class="practice-content">
|
||||
<strong>调整 rounds 参数</strong>
|
||||
<p>使哈希操作耗时在 100-500ms 之间，平衡安全性和用户体验。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">✅</div>
|
||||
<div class="practice-content">
|
||||
<strong>使用 HTTPS</strong>
|
||||
<p>防止密码在传输过程中被截获。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">❌</div>
|
||||
<div class="practice-content">
|
||||
<strong>不要使用 MD5、SHA1、SHA256</strong>
|
||||
<p>这些是快速哈希算法，不适合密码存储，容易被暴力破解。</p>
|
||||
</div>
|
||||
<div class="mono-box">
|
||||
<div class="mono-label">salt B</div>
|
||||
<code class="mono">{{ saltB }}</code>
|
||||
<div class="mono-label">hash B</div>
|
||||
<code class="mono">{{ hashB || '-' }}</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">
|
||||
彩虹表依赖“预计算”：同一个密码如果总产生同一个哈希，攻击者就能快速反查。盐让预计算成本爆炸。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const password = ref('password123')
|
||||
const selectedBadMethod = ref('md5')
|
||||
const rounds = ref(10)
|
||||
const lookupHash = ref('')
|
||||
const lookupResult = ref('')
|
||||
const hashTime = ref(0)
|
||||
const password = ref('')
|
||||
const iterations = ref(60000)
|
||||
const saltEnabled = ref(true)
|
||||
const saltHex = ref('')
|
||||
|
||||
const badMethods = [
|
||||
{ key: 'md5', name: 'MD5' },
|
||||
{ key: 'sha1', name: 'SHA1' },
|
||||
{ key: 'sha256', name: 'SHA256' }
|
||||
]
|
||||
const hashHex = ref('')
|
||||
const timeMs = ref(0)
|
||||
|
||||
const rainbowTable = [
|
||||
{ password: '123456', hash: 'e10adc3949ba59abbe56e057f20f883e' },
|
||||
{ password: 'password', hash: '5f4dcc3b5aa765d61d8327deb882cf99' },
|
||||
{ password: 'admin', hash: '21232f297a57a5a743894a0e4a801fc3' },
|
||||
{ password: '123456789', hash: '25f9e794323b453885f5181f1b624d0b' },
|
||||
{ password: 'qwerty', hash: 'd8578edf8458ce06fbc5bb76a58c5ca4' }
|
||||
]
|
||||
let t = null
|
||||
|
||||
const badHashResult = computed(() => {
|
||||
if (!password.value) return '等待输入...'
|
||||
const toHex = (bytes) =>
|
||||
[...bytes].map((b) => b.toString(16).padStart(2, '0')).join('')
|
||||
|
||||
const hash = simpleHash(password.value, selectedBadMethod.value)
|
||||
return hash
|
||||
})
|
||||
|
||||
const badMethodIssues = computed(() => {
|
||||
const issues = {
|
||||
md5: [
|
||||
'⚡ 快速哈希：1秒可计算数十亿次',
|
||||
'🌈 彩虹表攻击：常见密码可秒破',
|
||||
'🔓 无盐：相同密码产生相同哈希'
|
||||
],
|
||||
sha1: [
|
||||
'⚡ 快速哈希：比 MD5 慢一点，但仍然太快',
|
||||
'🌈 彩虹表攻击：同样 vulnerable',
|
||||
'🔓 无盐：相同密码产生相同哈希'
|
||||
],
|
||||
sha256: [
|
||||
'⚡ 快速哈希：虽然比 SHA1 慢，但仍不够',
|
||||
'🌈 彩虹表攻击：GPU 可加速破解',
|
||||
'🔓 无盐：相同密码产生相同哈希'
|
||||
]
|
||||
const fromHex = (hex) => {
|
||||
const clean = hex.trim().replace(/^0x/, '')
|
||||
if (!clean) return new Uint8Array()
|
||||
const out = new Uint8Array(clean.length / 2)
|
||||
for (let i = 0; i < out.length; i++) {
|
||||
out[i] = parseInt(clean.slice(i * 2, i * 2 + 2), 16)
|
||||
}
|
||||
return issues[selectedBadMethod.value] || []
|
||||
})
|
||||
|
||||
const bcryptHashResult = computed(() => {
|
||||
if (!password.value) return '等待输入...'
|
||||
|
||||
// 模拟 bcrypt 格式: $2a$rounds$salt+hash
|
||||
const salt = Math.random().toString(36).substring(2, 14)
|
||||
const hash = simpleHash(password.value + salt, 'sha256').substring(0, 31)
|
||||
|
||||
return `$2a$${rounds.value}$${salt}${hash}`
|
||||
})
|
||||
|
||||
const simpleHash = (str, algorithm) => {
|
||||
// 简化的哈希函数用于演示
|
||||
let hash = 0
|
||||
const str2 = algorithm + str
|
||||
|
||||
for (let i = 0; i < str2.length; i++) {
|
||||
const char = str2.charCodeAt(i)
|
||||
hash = (hash << 5) - hash + char
|
||||
hash = hash & hash
|
||||
}
|
||||
|
||||
return Math.abs(hash).toString(16).padStart(32, '0').substring(0, 32)
|
||||
return out
|
||||
}
|
||||
|
||||
const updateHash = () => {
|
||||
const startTime = performance.now()
|
||||
|
||||
// 模拟 bcrypt 的延迟
|
||||
const delay = Math.pow(2, rounds.value - 4) * 10
|
||||
hashTime.value = Math.min(delay, 500)
|
||||
|
||||
// 模拟哈希计算
|
||||
setTimeout(() => {
|
||||
const endTime = performance.now()
|
||||
hashTime.value = Math.round(endTime - startTime)
|
||||
}, 0)
|
||||
const randomSaltHex = (len = 16) => {
|
||||
const bytes = new Uint8Array(len)
|
||||
crypto.getRandomValues(bytes)
|
||||
return toHex(bytes)
|
||||
}
|
||||
|
||||
const lookupPassword = () => {
|
||||
const hash = lookupHash.value.trim()
|
||||
const derive = async ({ pwd, iters, salt }) => {
|
||||
const enc = new TextEncoder()
|
||||
const keyMaterial = await crypto.subtle.importKey(
|
||||
'raw',
|
||||
enc.encode(pwd),
|
||||
{ name: 'PBKDF2' },
|
||||
false,
|
||||
['deriveBits']
|
||||
)
|
||||
const bits = await crypto.subtle.deriveBits(
|
||||
{ name: 'PBKDF2', salt, iterations: iters, hash: 'SHA-256' },
|
||||
keyMaterial,
|
||||
256
|
||||
)
|
||||
return toHex(new Uint8Array(bits))
|
||||
}
|
||||
|
||||
if (!hash) {
|
||||
lookupResult.value = '请输入哈希值'
|
||||
const recompute = async () => {
|
||||
if (!password.value) {
|
||||
hashHex.value = ''
|
||||
timeMs.value = 0
|
||||
await recomputeRainbow()
|
||||
return
|
||||
}
|
||||
|
||||
const found = rainbowTable.find((item) => item.hash === hash)
|
||||
const saltBytes = saltEnabled.value
|
||||
? fromHex(saltHex.value)
|
||||
: new Uint8Array(16) // "no salt" demonstration: constant all-zero salt
|
||||
|
||||
if (found) {
|
||||
lookupResult.value = `✅ 找到匹配：密码是 "${found.password}"`
|
||||
} else {
|
||||
lookupResult.value = '❌ 未在彩虹表中找到'
|
||||
const start = performance.now()
|
||||
try {
|
||||
hashHex.value = await derive({
|
||||
pwd: password.value,
|
||||
iters: iterations.value,
|
||||
salt: saltBytes
|
||||
})
|
||||
} finally {
|
||||
timeMs.value = Math.max(0, Math.round(performance.now() - start))
|
||||
}
|
||||
|
||||
await recomputeRainbow()
|
||||
}
|
||||
|
||||
const debouncedRecompute = () => {
|
||||
if (t) clearTimeout(t)
|
||||
t = setTimeout(() => {
|
||||
recompute()
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const regenSalt = () => {
|
||||
saltHex.value = randomSaltHex(16)
|
||||
recompute()
|
||||
}
|
||||
|
||||
// Rainbow demo
|
||||
const saltA = ref('')
|
||||
const saltB = ref('')
|
||||
const hashA = ref('')
|
||||
const hashB = ref('')
|
||||
|
||||
const recomputeRainbow = async () => {
|
||||
if (!password.value) {
|
||||
hashA.value = ''
|
||||
hashB.value = ''
|
||||
return
|
||||
}
|
||||
const a = fromHex(saltA.value)
|
||||
const b = fromHex(saltB.value)
|
||||
hashA.value = await derive({ pwd: password.value, iters: 30000, salt: a })
|
||||
hashB.value = await derive({ pwd: password.value, iters: 30000, salt: b })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
saltHex.value = randomSaltHex(16)
|
||||
saltA.value = randomSaltHex(16)
|
||||
saltB.value = randomSaltHex(16)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.password-hashing-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.password-input label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.password-input input {
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.generate-btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.generate-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comparison-card {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.comparison-card.bad {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.comparison-card.good {
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.method-selector {
|
||||
.label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.range {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
margin-top: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.method-btn {
|
||||
.col {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.method-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.hash-result {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.security-info {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.info-list li {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.rounds-control {
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.rounds-control label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rounds-control input[type='range'] {
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rounds-info {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
display: flex;
|
||||
.toggle {
|
||||
display: inline-flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.rainbow-table {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title,
|
||||
.practices-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.rainbow-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.rainbow-explanation {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.explanation-text {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.explanation-text p {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.explanation-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.rainbow-demo {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.rainbow-table-container {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
thead th {
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.hash {
|
||||
color: var(--vp-c-text-2);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lookup-demo {
|
||||
background: white;
|
||||
.btn {
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.lookup-title {
|
||||
font-size: 0.8rem;
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.lookup-input {
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.lookup-input input {
|
||||
flex: 1;
|
||||
padding: 0.4rem;
|
||||
.badge {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border-radius: 999px;
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.lookup-btn {
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lookup-result {
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.best-practices {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
.mono-box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.practices-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.practice-item {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.practice-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.practice-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.practice-content strong {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
.mono-label {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.practice-content p {
|
||||
.mono {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison {
|
||||
flex-direction: column;
|
||||
}
|
||||
.alert {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
transform: rotate(90deg);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.alert-title {
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.rainbow-content {
|
||||
.alert-text {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.two {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.two {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,688 +1,361 @@
|
||||
<!--
|
||||
SessionCookieDemo.vue
|
||||
Session + Cookie 工作流程演示
|
||||
Session + Cookie（手动推进，更贴近真实 Web 登录态）
|
||||
-->
|
||||
<template>
|
||||
<div class="session-cookie-demo">
|
||||
<div class="session-demo">
|
||||
<div class="header">
|
||||
<div class="title">Session + Cookie 工作流程</div>
|
||||
<div class="subtitle">Web 开发的经典鉴权方案</div>
|
||||
<div class="title">🍪 Session + Cookie：有状态登录</div>
|
||||
<div class="subtitle">
|
||||
默认手动推进：先看清楚状态再进入下一步（避免“自动下一步”误解）。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button
|
||||
class="action-btn login"
|
||||
@click="performLogin"
|
||||
:disabled="isLoggedIn"
|
||||
>
|
||||
<span class="btn-icon">🔑</span>
|
||||
<span class="btn-text">模拟登录</span>
|
||||
<button class="btn primary" @click="start" :disabled="step !== 0">
|
||||
开始
|
||||
</button>
|
||||
<button class="btn" @click="prev" :disabled="step <= 1">上一步</button>
|
||||
<button
|
||||
class="action-btn request"
|
||||
@click="performRequest"
|
||||
:disabled="!isLoggedIn"
|
||||
class="btn primary"
|
||||
@click="next"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
>
|
||||
<span class="btn-icon">🌐</span>
|
||||
<span class="btn-text">发送请求</span>
|
||||
</button>
|
||||
<button
|
||||
class="action-btn logout"
|
||||
@click="performLogout"
|
||||
:disabled="!isLoggedIn"
|
||||
>
|
||||
<span class="btn-icon">🚪</span>
|
||||
<span class="btn-text">退出登录</span>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="reset">重置</button>
|
||||
</div>
|
||||
|
||||
<div class="visual-container">
|
||||
<div class="client-server">
|
||||
<div class="client">
|
||||
<div class="device-header">
|
||||
<span class="device-icon">💻</span>
|
||||
<span class="device-label">浏览器</span>
|
||||
</div>
|
||||
<div class="device-content">
|
||||
<div class="cookie-jar">
|
||||
<div class="jar-label">Cookie 存储</div>
|
||||
<div class="jar-content">
|
||||
<div v-if="sessionCookie" class="cookie-item">
|
||||
<div class="cookie-key">session_id</div>
|
||||
<div class="cookie-value">{{ sessionCookie }}</div>
|
||||
</div>
|
||||
<div v-else class="cookie-empty">暂无 Cookie</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="request-preview" v-if="currentRequest">
|
||||
<div class="preview-title">当前请求</div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-line">{{ currentRequest }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="step > 0" class="progress">
|
||||
Step {{ step }} / {{ maxStep }} · {{ steps[step - 1]?.title }}
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">浏览器（客户端）</div>
|
||||
<div class="box">
|
||||
<div class="box-title">Cookie Jar</div>
|
||||
<div v-if="cookie" class="kv">
|
||||
<div class="k">session_id</div>
|
||||
<div class="v mono">{{ cookie }}</div>
|
||||
</div>
|
||||
<div v-else class="empty">暂无 Cookie</div>
|
||||
</div>
|
||||
|
||||
<div class="connection">
|
||||
<div class="connection-line" :class="{ active: isTransferring }">
|
||||
<div class="data-packet" v-if="isTransferring">
|
||||
{{ transferData }}
|
||||
<div class="box">
|
||||
<div class="box-title">本步请求</div>
|
||||
<pre class="code"><code>{{ clientRequest }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">服务器</div>
|
||||
<div class="box">
|
||||
<div class="box-title">Session Store（Redis/Memory）</div>
|
||||
<div v-if="session" class="kv">
|
||||
<div class="k mono">{{ cookie }}</div>
|
||||
<div class="v">
|
||||
<div class="row"><span class="muted">user_id</span> 123</div>
|
||||
<div class="row"><span class="muted">username</span> alice</div>
|
||||
<div class="row"><span class="muted">role</span> admin</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty">暂无 Session</div>
|
||||
</div>
|
||||
|
||||
<div class="server">
|
||||
<div class="device-header">
|
||||
<span class="device-icon">🖥️</span>
|
||||
<span class="device-label">服务器</span>
|
||||
</div>
|
||||
<div class="device-content">
|
||||
<div class="session-storage">
|
||||
<div class="storage-label">Session 存储 (Redis/Memory)</div>
|
||||
<div class="storage-content">
|
||||
<div v-if="serverSession" class="session-item">
|
||||
<div class="session-key">{{ sessionCookie }}</div>
|
||||
<div class="session-data">
|
||||
<div class="data-row">
|
||||
<span class="data-key">user_id:</span>
|
||||
<span class="data-value">{{
|
||||
serverSession.user_id
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-key">username:</span>
|
||||
<span class="data-value">{{
|
||||
serverSession.username
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-key">role:</span>
|
||||
<span class="data-value">{{ serverSession.role }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="session-empty">暂无 Session</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">本步响应</div>
|
||||
<pre class="code"><code>{{ serverResponse }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-steps" v-if="currentStep">
|
||||
<div class="steps-title">流程说明</div>
|
||||
<div class="steps-list">
|
||||
<div
|
||||
v-for="(step, index) in currentStep.steps"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
:class="{ active: step.active }"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-content">{{ step.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-cards">
|
||||
<div class="info-card pros">
|
||||
<div class="card-icon">✅</div>
|
||||
<div class="card-title">优点</div>
|
||||
<ul class="card-list">
|
||||
<li>简单直观，易于理解</li>
|
||||
<li>服务端可以主动注销</li>
|
||||
<li>Session 信息存储在服务端，相对安全</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-card cons">
|
||||
<div class="card-icon">⚠️</div>
|
||||
<div class="card-title">缺点</div>
|
||||
<ul class="card-list">
|
||||
<li>服务器有状态，需要存储 Session</li>
|
||||
<li>多台服务器需要共享 Session（如 Redis）</li>
|
||||
<li>跨域困难，Cookie 默认不能跨域</li>
|
||||
<li>容易受到 CSRF 攻击</li>
|
||||
</ul>
|
||||
<div class="card">
|
||||
<div class="card-title">{{ steps[step - 1]?.title || '流程说明' }}</div>
|
||||
<div class="desc">{{ steps[step - 1]?.desc }}</div>
|
||||
<div v-if="steps[step - 1]?.warn" class="warn">
|
||||
<div class="warn-title">注意</div>
|
||||
<div class="warn-text">{{ steps[step - 1]?.warn }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const isLoggedIn = ref(false)
|
||||
const isTransferring = ref(false)
|
||||
const sessionCookie = ref('')
|
||||
const serverSession = ref(null)
|
||||
const currentRequest = ref('')
|
||||
const transferData = ref('')
|
||||
const currentStep = ref(null)
|
||||
const maxStep = 5
|
||||
const step = ref(0)
|
||||
|
||||
const steps = {
|
||||
login: {
|
||||
steps: [
|
||||
{ text: '用户提交用户名密码', active: false },
|
||||
{ text: '服务器验证身份', active: false },
|
||||
{ text: '创建 Session 并存储用户信息', active: false },
|
||||
{ text: '返回 Set-Cookie: session_id=xxx', active: false },
|
||||
{ text: '浏览器保存 Cookie', active: false }
|
||||
]
|
||||
const cookie = ref('')
|
||||
const session = ref(false)
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: '1) 登录请求（POST /login）',
|
||||
desc: '用户提交用户名/密码，服务器验证成功后创建 Session。'
|
||||
},
|
||||
request: {
|
||||
steps: [
|
||||
{ text: '浏览器自动带上 Cookie', active: false },
|
||||
{ text: '服务器根据 session_id 查找 Session', active: false },
|
||||
{ text: '找到 Session，验证通过', active: false },
|
||||
{ text: '返回请求的数据', active: false }
|
||||
]
|
||||
{
|
||||
title: '2) 服务器 Set-Cookie',
|
||||
desc: '服务器返回 Set-Cookie: session_id=...；浏览器保存 Cookie。',
|
||||
warn: 'Cookie 建议加 HttpOnly + Secure + SameSite；同时要考虑 CSRF 防护。'
|
||||
},
|
||||
logout: {
|
||||
steps: [
|
||||
{ text: '用户点击退出', active: false },
|
||||
{ text: '服务器删除 Session', active: false },
|
||||
{ text: '清除浏览器 Cookie', active: false },
|
||||
{ text: '退出成功', active: false }
|
||||
]
|
||||
{
|
||||
title: '3) 后续请求自动带 Cookie',
|
||||
desc: '浏览器对同域请求会自动带上 Cookie，服务器用 session_id 查 Session。'
|
||||
},
|
||||
{
|
||||
title: '4) 授权判断（role/权限）',
|
||||
desc: '认证（你是谁）之后，仍需要授权（你能做什么）。比如 admin 才能访问管理接口。'
|
||||
},
|
||||
{
|
||||
title: '5) 注销',
|
||||
desc: '服务器删除 Session（或让其过期），并让浏览器清理 Cookie。'
|
||||
}
|
||||
]
|
||||
|
||||
const start = () => {
|
||||
step.value = 1
|
||||
cookie.value = ''
|
||||
session.value = false
|
||||
}
|
||||
|
||||
const next = () => {
|
||||
step.value = Math.min(maxStep, step.value + 1)
|
||||
applyState()
|
||||
}
|
||||
|
||||
const prev = () => {
|
||||
step.value = Math.max(1, step.value - 1)
|
||||
applyState()
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
step.value = 0
|
||||
cookie.value = ''
|
||||
session.value = false
|
||||
}
|
||||
|
||||
const applyState = () => {
|
||||
if (step.value <= 1) {
|
||||
cookie.value = ''
|
||||
session.value = false
|
||||
return
|
||||
}
|
||||
if (step.value >= 2) {
|
||||
if (!cookie.value)
|
||||
cookie.value = 'sess_' + Math.random().toString(36).slice(2, 10)
|
||||
session.value = true
|
||||
}
|
||||
if (step.value >= 5) {
|
||||
// logout (show as empty state by step title/response)
|
||||
// We don't auto-clear state; keep it visible until reset to avoid “auto” confusion.
|
||||
}
|
||||
}
|
||||
|
||||
const performLogin = async () => {
|
||||
const sessionId = generateSessionId()
|
||||
const stepsData = steps.login
|
||||
const clientRequest = computed(() => {
|
||||
if (step.value === 0) return '（点击开始）'
|
||||
if (step.value === 1) {
|
||||
return `POST /login
|
||||
Content-Type: application/json
|
||||
|
||||
for (let i = 0; i < stepsData.steps.length; i++) {
|
||||
stepsData.steps[i].active = true
|
||||
currentStep.value = stepsData
|
||||
|
||||
if (i === 0) {
|
||||
currentRequest.value =
|
||||
'POST /login\n{ username: "alice", password: "***" }'
|
||||
transferData.value = '登录请求'
|
||||
isTransferring.value = true
|
||||
await delay(800)
|
||||
} else if (i === 2) {
|
||||
serverSession.value = {
|
||||
user_id: 123,
|
||||
username: 'alice',
|
||||
role: 'user'
|
||||
}
|
||||
await delay(600)
|
||||
} else if (i === 3) {
|
||||
transferData.value = 'Set-Cookie'
|
||||
isTransferring.value = true
|
||||
await delay(800)
|
||||
sessionCookie.value = sessionId
|
||||
isLoggedIn.value = true
|
||||
} else {
|
||||
await delay(500)
|
||||
}
|
||||
{"username":"alice","password":"******"}`
|
||||
}
|
||||
|
||||
isTransferring.value = false
|
||||
currentRequest.value = ''
|
||||
transferData.value = ''
|
||||
}
|
||||
|
||||
const performRequest = async () => {
|
||||
const stepsData = steps.request
|
||||
|
||||
for (let i = 0; i < stepsData.steps.length; i++) {
|
||||
stepsData.steps[i].active = true
|
||||
currentStep.value = stepsData
|
||||
|
||||
if (i === 0) {
|
||||
currentRequest.value = `GET /api/user/profile\nCookie: session_id=${sessionCookie.value}`
|
||||
transferData.value = '请求 + Cookie'
|
||||
isTransferring.value = true
|
||||
await delay(800)
|
||||
} else if (i === 1) {
|
||||
isTransferring.value = false
|
||||
await delay(600)
|
||||
} else if (i === 3) {
|
||||
transferData.value = '响应数据'
|
||||
isTransferring.value = true
|
||||
await delay(800)
|
||||
} else {
|
||||
await delay(500)
|
||||
}
|
||||
if (step.value === 2) return '（等待服务器响应并写入 Cookie）'
|
||||
if (step.value === 3) {
|
||||
return `GET /api/user/profile
|
||||
Cookie: session_id=${cookie.value}`
|
||||
}
|
||||
|
||||
isTransferring.value = false
|
||||
currentRequest.value = ''
|
||||
transferData.value = ''
|
||||
}
|
||||
|
||||
const performLogout = async () => {
|
||||
const stepsData = steps.logout
|
||||
|
||||
for (let i = 0; i < stepsData.steps.length; i++) {
|
||||
stepsData.steps[i].active = true
|
||||
currentStep.value = stepsData
|
||||
|
||||
if (i === 0) {
|
||||
currentRequest.value = 'POST /logout'
|
||||
transferData.value = '退出请求'
|
||||
isTransferring.value = true
|
||||
await delay(800)
|
||||
} else if (i === 1) {
|
||||
serverSession.value = null
|
||||
await delay(600)
|
||||
} else if (i === 2) {
|
||||
sessionCookie.value = ''
|
||||
isLoggedIn.value = false
|
||||
await delay(500)
|
||||
} else {
|
||||
await delay(400)
|
||||
}
|
||||
if (step.value === 4) {
|
||||
return `GET /api/admin/users
|
||||
Cookie: session_id=${cookie.value}`
|
||||
}
|
||||
return `POST /logout
|
||||
Cookie: session_id=${cookie.value}`
|
||||
})
|
||||
|
||||
isTransferring.value = false
|
||||
currentRequest.value = ''
|
||||
transferData.value = ''
|
||||
}
|
||||
|
||||
const generateSessionId = () => {
|
||||
return 'sess_' + Math.random().toString(36).substring(2, 15)
|
||||
}
|
||||
|
||||
const delay = (ms) => {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms))
|
||||
}
|
||||
const serverResponse = computed(() => {
|
||||
if (step.value === 0) return ''
|
||||
if (step.value === 1) return '200 OK (credentials valid)'
|
||||
if (step.value === 2) {
|
||||
return `200 OK
|
||||
Set-Cookie: session_id=${cookie.value}; HttpOnly; Secure; SameSite=Lax`
|
||||
}
|
||||
if (step.value === 3) return '200 OK (profile payload...)'
|
||||
if (step.value === 4)
|
||||
return '200 OK (admin data...) / 403 Forbidden (if not admin)'
|
||||
return `200 OK
|
||||
Set-Cookie: session_id=; Max-Age=0`
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.session-cookie-demo {
|
||||
.session-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
.btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn.login {
|
||||
background: #22c55e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.login:hover:not(:disabled) {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.action-btn.request {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.request:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.action-btn.logout {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.logout:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.client-server {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 1.5rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.client,
|
||||
.server {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.device-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.device-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.device-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cookie-jar,
|
||||
.session-storage {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.jar-label,
|
||||
.storage-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
.progress {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.jar-content,
|
||||
.storage-content {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.cookie-item,
|
||||
.session-item {
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.cookie-key {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.cookie-value {
|
||||
color: var(--vp-c-text-2);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.session-key {
|
||||
font-weight: 600;
|
||||
color: #8b5cf6;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.session-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.data-key {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.cookie-empty,
|
||||
.session-empty {
|
||||
text-align: center;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
padding: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.request-preview {
|
||||
background: #1e293b;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #e2e8f0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-line {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.connection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.connection-line {
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.connection-line.active {
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||
}
|
||||
|
||||
.data-packet {
|
||||
position: absolute;
|
||||
background: white;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
animation: pulse 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.steps-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-item.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.card-list li {
|
||||
.box-title {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info-card.pros .card-list li {
|
||||
color: #16a34a;
|
||||
.empty {
|
||||
color: var(--vp-c-text-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.info-card.cons .card-list li {
|
||||
color: #dc2626;
|
||||
.kv {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 0.75rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.client-server {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
.k {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.connection {
|
||||
display: none;
|
||||
}
|
||||
.v {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--vp-c-text-3);
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.code {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.warn {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.warn-title {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.warn-text {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,134 @@
|
||||
// auth-design 公共组件配置
|
||||
|
||||
// 生成按钮类名
|
||||
export const getButtonClasses = (variant = 'primary', disabled = false, size = 'medium') => {
|
||||
const base = 'auth-demo-btn'
|
||||
const classes = [base]
|
||||
|
||||
// 变体
|
||||
classes.push(`${base}-${variant}`)
|
||||
|
||||
// 状态
|
||||
if (disabled) classes.push(`${base}-disabled`)
|
||||
|
||||
// 大小
|
||||
classes.push(`${base}-${size}`)
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
// 生成卡片类名
|
||||
export const getCardClasses = (variant = 'default', clickable = false) => {
|
||||
const base = 'auth-demo-card'
|
||||
const classes = [base]
|
||||
|
||||
if (variant !== 'default') {
|
||||
classes.push(`${base}-${variant}`)
|
||||
}
|
||||
|
||||
if (clickable) {
|
||||
classes.push(`${base}-clickable`)
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
// 生成状态徽章类名
|
||||
export const getBadgeClasses = (type = 'info') => {
|
||||
const types = {
|
||||
success: 'auth-badge-success',
|
||||
warning: 'auth-badge-warning',
|
||||
danger: 'auth-badge-danger',
|
||||
info: 'auth-badge-info',
|
||||
purple: 'auth-badge-purple'
|
||||
}
|
||||
|
||||
return types[type] || types.info
|
||||
}
|
||||
|
||||
// 生成进度条类名
|
||||
export const getProgressClasses = (variant = 'primary') => {
|
||||
return `auth-progress auth-progress-${variant}`
|
||||
}
|
||||
|
||||
// 格式化代码示例
|
||||
export const formatCodeExample = (code, language = 'javascript') => {
|
||||
if (typeof code !== 'string') return ''
|
||||
return code.trim()
|
||||
}
|
||||
|
||||
// 生成流程步骤类名
|
||||
export const getStepClasses = (index, currentIndex, totalSteps) => {
|
||||
const classes = ['auth-step']
|
||||
|
||||
if (index < currentIndex) {
|
||||
classes.push('auth-step-completed')
|
||||
} else if (index === currentIndex) {
|
||||
classes.push('auth-step-active')
|
||||
} else {
|
||||
classes.push('auth-step-pending')
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
// 生成表格行类名
|
||||
export const getTableRowClasses = (highlight = false, index = 0) => {
|
||||
const classes = ['auth-table-row']
|
||||
|
||||
if (highlight) classes.push('auth-table-row-highlight')
|
||||
if (index % 2 === 0) classes.push('auth-table-row-even')
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
// 生成图标容器类名
|
||||
export const getIconContainerClasses = (size = 'medium', variant = 'default') => {
|
||||
return `auth-icon-container auth-icon-container-${size} auth-icon-container-${variant}`
|
||||
}
|
||||
|
||||
// 生成输入框类名
|
||||
export const getInputClasses = (state = 'default', size = 'medium') => {
|
||||
const classes = ['auth-input']
|
||||
|
||||
if (state !== 'default') {
|
||||
classes.push(`auth-input-${state}`)
|
||||
}
|
||||
|
||||
if (size !== 'medium') {
|
||||
classes.push(`auth-input-${size}`)
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
// 生成通知/提示框类名
|
||||
export const getAlertClasses = (type = 'info', dismissible = false) => {
|
||||
const classes = ['auth-alert', `auth-alert-${type}`]
|
||||
|
||||
if (dismissible) {
|
||||
classes.push('auth-alert-dismissible')
|
||||
}
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
// 生成标签类名
|
||||
export const getTagClasses = (variant = 'default', size = 'medium') => {
|
||||
return `auth-tag auth-tag-${variant} auth-tag-${size}`
|
||||
}
|
||||
|
||||
// 生成加载器类名
|
||||
export const getSpinnerClasses = (size = 'medium') => {
|
||||
return `auth-spinner auth-spinner-${size}`
|
||||
}
|
||||
|
||||
// 生成下拉菜单类名
|
||||
export const getDropdownClasses = (isOpen = false, direction = 'down') => {
|
||||
const classes = ['auth-dropdown']
|
||||
|
||||
if (isOpen) classes.push('auth-dropdown-open')
|
||||
classes.push(`auth-dropdown-${direction}`)
|
||||
|
||||
return classes.join(' ')
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
// auth-design 公共组合式函数
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
/**
|
||||
* 延迟函数
|
||||
* @param {number} ms - 延迟毫秒数
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
export const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
|
||||
/**
|
||||
* 防抖函数
|
||||
* @param {Function} fn - 要防抖的函数
|
||||
* @param {number} wait - 等待时间（毫秒）
|
||||
* @returns {Function}
|
||||
*/
|
||||
export const useDebounce = (fn, wait = 300) => {
|
||||
let timeout = null
|
||||
return (...args) => {
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => fn(...args), wait)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 步骤流程管理
|
||||
* @param {Array} steps - 步骤数组
|
||||
* @param {number} stepDelay - 每步延迟时间
|
||||
* @returns {Object}
|
||||
*/
|
||||
export const useStepFlow = (steps, stepDelay = 800) => {
|
||||
const currentStep = ref(0)
|
||||
const isProcessing = ref(false)
|
||||
|
||||
const startFlow = async () => {
|
||||
isProcessing.value = true
|
||||
for (let i = 0; i < steps.length; i++) {
|
||||
currentStep.value = i + 1
|
||||
await delay(stepDelay)
|
||||
}
|
||||
isProcessing.value = false
|
||||
}
|
||||
|
||||
const resetFlow = () => {
|
||||
currentStep.value = 0
|
||||
isProcessing.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
currentStep,
|
||||
isProcessing,
|
||||
startFlow,
|
||||
resetFlow
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 异步操作状态管理
|
||||
* @returns {Object}
|
||||
*/
|
||||
export const useAsyncState = () => {
|
||||
const isLoading = ref(false)
|
||||
const error = ref(null)
|
||||
const data = ref(null)
|
||||
|
||||
const execute = async (fn) => {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const result = await fn()
|
||||
data.value = result
|
||||
return result
|
||||
} catch (err) {
|
||||
error.value = err
|
||||
throw err
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
isLoading.value = false
|
||||
error.value = null
|
||||
data.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
error,
|
||||
data,
|
||||
execute,
|
||||
reset
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 定时器管理
|
||||
* @returns {Object}
|
||||
*/
|
||||
export const useTimer = () => {
|
||||
const timer = ref(null)
|
||||
const isRunning = ref(false)
|
||||
|
||||
const start = (callback, interval) => {
|
||||
if (timer.value) clearInterval(timer.value)
|
||||
isRunning.value = true
|
||||
timer.value = setInterval(callback, interval)
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
timer.value = null
|
||||
isRunning.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stop()
|
||||
})
|
||||
|
||||
return {
|
||||
isRunning,
|
||||
start,
|
||||
stop
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换状态
|
||||
* @param {boolean} initialValue - 初始值
|
||||
* @returns {Object}
|
||||
*/
|
||||
export const useToggle = (initialValue = false) => {
|
||||
const value = ref(initialValue)
|
||||
|
||||
const toggle = () => {
|
||||
value.value = !value.value
|
||||
}
|
||||
|
||||
const setTrue = () => {
|
||||
value.value = true
|
||||
}
|
||||
|
||||
const setFalse = () => {
|
||||
value.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
value,
|
||||
toggle,
|
||||
setTrue,
|
||||
setFalse
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 动画控制
|
||||
* @param {number} duration - 动画持续时间（毫秒）
|
||||
* @returns {Object}
|
||||
*/
|
||||
export const useAnimation = (duration = 300) => {
|
||||
const isAnimating = ref(false)
|
||||
|
||||
const animate = async (callback) => {
|
||||
isAnimating.value = true
|
||||
await callback()
|
||||
await delay(duration)
|
||||
isAnimating.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
isAnimating,
|
||||
animate
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成随机 ID
|
||||
* @param {string} prefix - 前缀
|
||||
* @returns {string}
|
||||
*/
|
||||
export const generateId = (prefix = 'id') => {
|
||||
return `${prefix}_${Math.random().toString(36).substring(2, 15)}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间戳
|
||||
* @param {number} timestamp - 时间戳
|
||||
* @returns {string}
|
||||
*/
|
||||
export const formatTimestamp = (timestamp) => {
|
||||
const date = new Date(timestamp)
|
||||
return date.toLocaleTimeString()
|
||||
}
|
||||
|
||||
/**
|
||||
* 深拷贝对象
|
||||
* @param {*} obj - 要拷贝的对象
|
||||
* @returns {*}
|
||||
*/
|
||||
export const deepClone = (obj) => {
|
||||
if (obj === null || typeof obj !== 'object') return obj
|
||||
if (obj instanceof Date) return new Date(obj.getTime())
|
||||
if (obj instanceof Array) return obj.map((item) => deepClone(item))
|
||||
if (obj instanceof Object) {
|
||||
const clonedObj = {}
|
||||
for (const key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
clonedObj[key] = deepClone(obj[key])
|
||||
}
|
||||
}
|
||||
return clonedObj
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量更新状态
|
||||
* @param {Object} stateRef - 状态引用
|
||||
* @param {Object} updates - 更新内容
|
||||
*/
|
||||
export const batchUpdate = (stateRef, updates) => {
|
||||
Object.assign(stateRef.value, updates)
|
||||
}
|
||||
|
||||
/**
|
||||
* 评分转换为星星
|
||||
* @param {number} score - 评分 (1-5)
|
||||
* @returns {string}
|
||||
*/
|
||||
export const scoreToStars = (score) => {
|
||||
return '⭐'.repeat(Math.floor(score))
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
// auth-design 公共样式配置
|
||||
export const commonStyles = {
|
||||
// 容器样式
|
||||
container: {
|
||||
base: 'auth-demo-container',
|
||||
classes: {
|
||||
border: '1px solid var(--vp-c-divider)',
|
||||
background: 'var(--vp-c-bg-soft)',
|
||||
borderRadius: '12px',
|
||||
padding: '1.5rem',
|
||||
margin: '1.5rem 0',
|
||||
fontFamily: 'var(--vp-font-family-base)'
|
||||
}
|
||||
},
|
||||
|
||||
// 标题样式
|
||||
header: {
|
||||
title: {
|
||||
fontWeight: '700',
|
||||
fontSize: '1.2rem',
|
||||
marginBottom: '0.3rem',
|
||||
background: 'linear-gradient(120deg, var(--vp-c-brand), #9c27b0)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent'
|
||||
},
|
||||
subtitle: {
|
||||
color: 'var(--vp-c-text-2)',
|
||||
fontSize: '0.9rem'
|
||||
}
|
||||
},
|
||||
|
||||
// 按钮样式
|
||||
button: {
|
||||
base: 'auth-demo-btn',
|
||||
primary: 'auth-demo-btn-primary',
|
||||
variants: {
|
||||
primary: {
|
||||
background: 'var(--vp-c-brand)',
|
||||
color: 'white'
|
||||
},
|
||||
success: {
|
||||
background: '#22c55e',
|
||||
color: 'white'
|
||||
},
|
||||
danger: {
|
||||
background: '#ef4444',
|
||||
color: 'white'
|
||||
},
|
||||
secondary: {
|
||||
background: '#64748b',
|
||||
color: 'white'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 卡片样式
|
||||
card: {
|
||||
base: 'auth-demo-card',
|
||||
background: 'var(--vp-c-bg)',
|
||||
border: '1px solid var(--vp-c-divider)',
|
||||
borderRadius: '10px',
|
||||
padding: '1.25rem'
|
||||
},
|
||||
|
||||
// 代码块样式
|
||||
codeBlock: {
|
||||
background: '#1e293b',
|
||||
color: '#e2e8f0',
|
||||
fontFamily: "'Courier New', monospace",
|
||||
fontSize: '0.8rem',
|
||||
lineHeight: '1.6',
|
||||
padding: '0.75rem',
|
||||
borderRadius: '6px'
|
||||
}
|
||||
}
|
||||
|
||||
// 动画配置
|
||||
export const animations = {
|
||||
fadeIn: {
|
||||
name: 'fadeIn',
|
||||
css: `
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
`
|
||||
},
|
||||
slideIn: {
|
||||
name: 'slideIn',
|
||||
css: `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
pulse: {
|
||||
name: 'pulse',
|
||||
css: `
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
`
|
||||
},
|
||||
bounce: {
|
||||
name: 'bounce',
|
||||
css: `
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||||
50% { transform: translateX(-50%) translateY(-5px); }
|
||||
}
|
||||
`
|
||||
},
|
||||
spin: {
|
||||
name: 'spin',
|
||||
css: `
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
// 颜色配置
|
||||
export const colors = {
|
||||
success: '#22c55e',
|
||||
warning: '#f59e0b',
|
||||
danger: '#ef4444',
|
||||
info: '#3b82f6',
|
||||
purple: '#8b5cf6'
|
||||
}
|
||||
|
||||
// 响应式断点
|
||||
export const breakpoints = {
|
||||
mobile: '768px'
|
||||
}
|
||||
Reference in New Issue
Block a user