feat: update docs and components, fix DLQ demo bug
This commit is contained in:
sanbuphy
@@ -0,0 +1,457 @@
|
||||
<!--
|
||||
AuthBasicsDemo.vue
|
||||
鉴权基础概念演示
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-basics-demo">
|
||||
<div class="header">
|
||||
<div class="title">为什么要鉴权？</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="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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const currentRole = ref('guest')
|
||||
|
||||
const roles = [
|
||||
{ key: 'guest', name: '访客', icon: '👤' },
|
||||
{ key: 'user', name: '普通用户', icon: '👤' },
|
||||
{ key: 'vip', name: 'VIP 用户', icon: '⭐' },
|
||||
{ key: 'admin', name: '管理员', icon: '👨💼' }
|
||||
]
|
||||
|
||||
const areas = ref([
|
||||
{
|
||||
key: 'lobby',
|
||||
label: '大厅',
|
||||
icon: '🚪',
|
||||
protected: false,
|
||||
requiredRole: null
|
||||
},
|
||||
{
|
||||
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 调用频率，防止服务被攻击'
|
||||
}
|
||||
]
|
||||
|
||||
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)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-basics-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
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 {
|
||||
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;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.scenario-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.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;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.scenario-privacy .scenario-icon {
|
||||
filter: hue-rotate(200deg);
|
||||
}
|
||||
.scenario-permission .scenario-icon {
|
||||
filter: hue-rotate(120deg);
|
||||
}
|
||||
.scenario-abuse .scenario-icon {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
|
||||
.key-point {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.key-point-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.key-point-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.key-point-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.building-areas {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.scenario-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.role-selector {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.role-btn {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,416 @@
|
||||
<!--
|
||||
AuthEvolutionDemo.vue
|
||||
鉴权方案演进史演示
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-evolution-demo">
|
||||
<div class="header">
|
||||
<div class="title">鉴权方案演进史</div>
|
||||
<div class="subtitle">从 HTTP Basic 到现代 JWT 的技术演进</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)"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</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="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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<div class="list-title">缺点</div>
|
||||
<ul>
|
||||
<li v-for="(con, idx) in currentEra.cons" :key="idx">{{ con }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="era-usecase">
|
||||
<div class="usecase-title">适用场景</div>
|
||||
<div class="usecase-content">{{ currentEra.usecase }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const selectedEra = ref('basic')
|
||||
|
||||
const eras = [
|
||||
{
|
||||
key: 'basic',
|
||||
title: 'HTTP Basic Authentication',
|
||||
year: '1990s',
|
||||
description:
|
||||
'最古老的鉴权方案，直接把用户名密码经过 Base64 编码后放在 HTTP 头中。虽然简单，但因为安全性问题已不推荐使用。',
|
||||
flow: [
|
||||
'客户端发送用户名密码',
|
||||
'服务器验证身份',
|
||||
'返回受保护资源',
|
||||
'每次请求都携带密码'
|
||||
],
|
||||
pros: ['实现简单，所有浏览器都支持', '标准化协议', '无需额外存储'],
|
||||
cons: [
|
||||
'Base64 可解码，相当于明文传输',
|
||||
'每次请求都要传密码，容易被截获',
|
||||
'无法主动注销（除非关闭浏览器）',
|
||||
'无法防止 CSRF 攻击'
|
||||
],
|
||||
usecase: '只适合内部测试工具，绝不用于生产环境'
|
||||
},
|
||||
{
|
||||
key: 'session',
|
||||
title: 'Session + Cookie',
|
||||
year: '2000s',
|
||||
description:
|
||||
'Web 开发的经典方案。服务器验证用户身份后创建 Session，返回 Session ID 给客户端，客户端每次请求自动带上 Cookie。',
|
||||
flow: [
|
||||
'用户登录提交用户名密码',
|
||||
'服务器验证并创建 Session',
|
||||
'返回 Set-Cookie: session_id',
|
||||
'后续请求自动带上 Cookie'
|
||||
],
|
||||
pros: [
|
||||
'简单直观，易于理解',
|
||||
'服务端可以主动注销（删除 Session）',
|
||||
'Session 信息存储在服务端，相对安全'
|
||||
],
|
||||
cons: [
|
||||
'服务器有状态，需要存储 Session',
|
||||
'多台服务器需要共享 Session（如 Redis）',
|
||||
'跨域困难，Cookie 默认不能跨域',
|
||||
'容易受到 CSRF 攻击'
|
||||
],
|
||||
usecase: '适合传统 Web 应用（服务器端渲染），不适合移动端和现代 SPA'
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
title: 'JWT (JSON Web Token)',
|
||||
year: '2010s',
|
||||
description:
|
||||
'现代 Web 的主流方案。不在服务端存储状态，把用户信息加密成 Token，放在客户端。JWT 由 Header、Payload、Signature 三部分组成。',
|
||||
flow: [
|
||||
'用户登录验证身份',
|
||||
'服务器生成 JWT Token',
|
||||
'客户端存储 Token（localStorage）',
|
||||
'后续请求在 Header 中携带 Token'
|
||||
],
|
||||
pros: [
|
||||
'无状态，服务端不存储 Session',
|
||||
'易于横向扩展',
|
||||
'跨域友好，不受 Cookie 限制',
|
||||
'移动端友好，原生 App 也能轻松使用',
|
||||
'Payload 可以存储用户信息、权限等'
|
||||
],
|
||||
cons: [
|
||||
'无法主动注销，Token 一旦签发在过期前一直有效',
|
||||
'Payload 可见（Base64 编码），不能存敏感信息',
|
||||
'Token 过大，每次请求都要带上',
|
||||
'需要额外的黑名单机制实现注销'
|
||||
],
|
||||
usecase: '现代 Web 和移动端的标准方案，特别适合分布式系统和微服务架构'
|
||||
}
|
||||
]
|
||||
|
||||
const currentEra = computed(() => eras.find((e) => e.key === selectedEra.value))
|
||||
|
||||
const selectEra = (key) => {
|
||||
selectedEra.value = key
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-evolution-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
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;
|
||||
}
|
||||
|
||||
.era-item {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
|
||||
.era-description {
|
||||
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;
|
||||
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;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.era-item {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.era-pros-cons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,654 @@
|
||||
<!--
|
||||
AuthNvsAuthZDemo.vue
|
||||
认证 vs 授权对比演示
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-n-vs-z-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>
|
||||
</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>
|
||||
</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="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>
|
||||
|
||||
<div class="result-box" :class="resultClass">
|
||||
<div class="result-icon">{{ resultIcon }}</div>
|
||||
<div class="result-text">{{ resultText }}</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-insight">
|
||||
<div class="insight-icon">💡</div>
|
||||
<div class="insight-text">
|
||||
<strong>核心关系：</strong>先认证（AuthN），再授权（AuthZ）。
|
||||
只有确认了"你是谁"，才能判断"你能干什么"。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } 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 flowSteps = [
|
||||
{
|
||||
title: '用户请求',
|
||||
desc: '用户发起操作请求'
|
||||
},
|
||||
{
|
||||
title: '认证 (AuthN)',
|
||||
desc: '验证 Token 是否有效'
|
||||
},
|
||||
{
|
||||
title: '授权 (AuthZ)',
|
||||
desc: '检查是否有权限'
|
||||
},
|
||||
{
|
||||
title: '执行业务逻辑',
|
||||
desc: '允许或拒绝访问'
|
||||
}
|
||||
]
|
||||
|
||||
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 actionNames = {
|
||||
view: '查看文章',
|
||||
edit: '编辑文章',
|
||||
delete: '删除文章',
|
||||
admin: '访问管理后台'
|
||||
}
|
||||
|
||||
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} - 权限不足`
|
||||
}
|
||||
return `${role}可以${action} - 授权通过`
|
||||
})
|
||||
|
||||
const resultClass = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
return hasPermission ? 'success' : 'error'
|
||||
})
|
||||
|
||||
const resultIcon = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
return hasPermission ? '✅' : '❌'
|
||||
})
|
||||
|
||||
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 {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
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;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-abbr {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.role-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.role-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.role-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.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;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-details-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
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 {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.insight-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
transform: rotate(90deg);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,773 @@
|
||||
<!--
|
||||
CSRFDefenseDemo.vue
|
||||
CSRF 防御演示
|
||||
-->
|
||||
<template>
|
||||
<div class="csrf-defense-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>
|
||||
</div>
|
||||
|
||||
<div class="defense-mechanisms">
|
||||
<div class="mechanisms-title">防御措施</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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const isLoggedIn = ref(false)
|
||||
const attackTriggered = ref(false)
|
||||
const attackResult = ref(null)
|
||||
const selectedMechanism = ref('csrf-token')
|
||||
|
||||
const mechanisms = [
|
||||
{
|
||||
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', '⚠️ 增加开发和维护成本']
|
||||
},
|
||||
{
|
||||
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: ['⚠️ 老版本浏览器不支持', '⚠️ 可能影响某些合法的跨站请求']
|
||||
},
|
||||
{
|
||||
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 无法用）'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const currentMechanism = computed(() => {
|
||||
return mechanisms.find((m) => m.key === selectedMechanism.value)
|
||||
})
|
||||
|
||||
const performTransfer = () => {
|
||||
if (!isLoggedIn.value) return
|
||||
alert('正常转账：转账成功')
|
||||
}
|
||||
|
||||
const triggerAttack = () => {
|
||||
attackTriggered.value = true
|
||||
|
||||
if (isLoggedIn.value) {
|
||||
attackResult.value = {
|
||||
type: 'danger',
|
||||
icon: '⚠️',
|
||||
text: 'CSRF 攻击成功！浏览器自动带上了银行的 Cookie，转账请求被发送。'
|
||||
}
|
||||
} else {
|
||||
attackResult.value = {
|
||||
type: 'warning',
|
||||
icon: '🛡️',
|
||||
text: '攻击失败：用户未登录银行网站。'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.csrf-defense-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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) {
|
||||
.attack-scenario {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.scenario-arrow {
|
||||
writing-mode: horizontal-tb;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.mechanism-tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mechanism-pros-cons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,688 @@
|
||||
<!--
|
||||
JWTWorkflowDemo.vue
|
||||
JWT 工作流程演示
|
||||
-->
|
||||
<template>
|
||||
<div class="jwt-workflow-demo">
|
||||
<div class="header">
|
||||
<div class="title">JWT 工作流程</div>
|
||||
<div class="subtitle">JSON Web Token 的生成与验证</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>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="verifyToken"
|
||||
:disabled="!generatedToken || isProcessing"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
</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="part-label">Header</div>
|
||||
<div class="part-content">{{ tokenParts.header }}</div>
|
||||
</div>
|
||||
<div class="token-divider">.</div>
|
||||
<div class="token-part payload" @click="showPart = 'payload'">
|
||||
<div class="part-label">Payload</div>
|
||||
<div class="part-content">{{ tokenParts.payload }}</div>
|
||||
</div>
|
||||
<div class="token-divider">.</div>
|
||||
<div class="token-part signature" @click="showPart = 'signature'">
|
||||
<div class="part-label">Signature</div>
|
||||
<div class="part-content">{{ tokenParts.signature }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="token-full" v-if="showFull">
|
||||
<div class="full-title">完整 Token</div>
|
||||
<div class="full-content">{{ generatedToken }}</div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const isProcessing = ref(false)
|
||||
const generatedToken = ref('')
|
||||
const showFull = ref(false)
|
||||
const showPart = ref(null)
|
||||
const result = ref(null)
|
||||
|
||||
const tokenParts = ref({
|
||||
header: '',
|
||||
payload: '',
|
||||
signature: ''
|
||||
})
|
||||
|
||||
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)'
|
||||
}
|
||||
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 verifyToken = async () => {
|
||||
isProcessing.value = true
|
||||
|
||||
await delay(800)
|
||||
|
||||
// 模拟验证
|
||||
const isValid = Math.random() > 0.2
|
||||
|
||||
result.value = {
|
||||
type: isValid ? 'success' : 'error',
|
||||
icon: isValid ? '✅' : '❌',
|
||||
text: isValid ? 'Token 验证通过！签名有效' : 'Token 验证失败：签名无效'
|
||||
}
|
||||
|
||||
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;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
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;
|
||||
}
|
||||
|
||||
.action-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;
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.info-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;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.card-list li {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-card.pros .card-list li {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.info-card.cons .card-list li {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.structure-diagram {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.diagram-plus {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,673 @@
|
||||
<!--
|
||||
OAuth2FlowDemo.vue
|
||||
OAuth 2.0 授权流程演示
|
||||
-->
|
||||
<template>
|
||||
<div class="oauth2-flow-demo">
|
||||
<div class="header">
|
||||
<div class="title">OAuth 2.0 授权码流程</div>
|
||||
<div class="subtitle">第三方登录（如微信登录）的完整流程</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>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="nextStep"
|
||||
:disabled="isProcessing || currentStep === 0 || currentStep >= maxSteps"
|
||||
>
|
||||
<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>
|
||||
</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 class="actor client" :class="{ active: isClientActive }">
|
||||
<div class="actor-icon">🌐</div>
|
||||
<div class="actor-label">第三方应用</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isProcessing = ref(false)
|
||||
const maxSteps = 5
|
||||
|
||||
const currentAction = ref(null)
|
||||
const currentDataExchange = ref(null)
|
||||
|
||||
const flowSteps = [
|
||||
{
|
||||
title: '用户点击"使用微信登录"',
|
||||
desc: '第三方应用重定向到微信授权页面'
|
||||
},
|
||||
{
|
||||
title: '用户扫码并同意授权',
|
||||
desc: '微信重定向回第三方应用，携带授权码 code'
|
||||
},
|
||||
{
|
||||
title: '后端用 code 换取 access_token',
|
||||
desc: '第三方应用后端调用微信 API，使用 code 换取 token'
|
||||
},
|
||||
{
|
||||
title: '用 access_token 获取用户信息',
|
||||
desc: '调用微信用户信息 API，获取用户数据'
|
||||
},
|
||||
{
|
||||
title: '创建或更新本地用户',
|
||||
desc: '第三方应用创建本地用户，生成本系统的 JWT'
|
||||
}
|
||||
]
|
||||
|
||||
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 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 {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
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;
|
||||
}
|
||||
|
||||
.action-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;
|
||||
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;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-item.completed {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.security-notes {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.note-text {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,700 @@
|
||||
<!--
|
||||
PasswordHashingDemo.vue
|
||||
密码哈希演示
|
||||
-->
|
||||
<template>
|
||||
<div class="password-hashing-demo">
|
||||
<div class="header">
|
||||
<div class="title">密码哈希：为什么不能存明文？</div>
|
||||
<div class="subtitle">理解 bcrypt 和彩虹表攻击</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="comparison">
|
||||
<div class="comparison-card bad">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">❌</div>
|
||||
<div class="card-title">错误做法</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 }}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">VS</div>
|
||||
|
||||
<div class="comparison-card good">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">✅</div>
|
||||
<div class="card-title">正确做法</div>
|
||||
</div>
|
||||
|
||||
<div class="method-selector">
|
||||
<button class="method-btn active">bcrypt</button>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } 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 badMethods = [
|
||||
{ key: 'md5', name: 'MD5' },
|
||||
{ key: 'sha1', name: 'SHA1' },
|
||||
{ key: 'sha256', name: 'SHA256' }
|
||||
]
|
||||
|
||||
const rainbowTable = [
|
||||
{ password: '123456', hash: 'e10adc3949ba59abbe56e057f20f883e' },
|
||||
{ password: 'password', hash: '5f4dcc3b5aa765d61d8327deb882cf99' },
|
||||
{ password: 'admin', hash: '21232f297a57a5a743894a0e4a801fc3' },
|
||||
{ password: '123456789', hash: '25f9e794323b453885f5181f1b624d0b' },
|
||||
{ password: 'qwerty', hash: 'd8578edf8458ce06fbc5bb76a58c5ca4' }
|
||||
]
|
||||
|
||||
const badHashResult = computed(() => {
|
||||
if (!password.value) return '等待输入...'
|
||||
|
||||
const hash = simpleHash(password.value, selectedBadMethod.value)
|
||||
return hash
|
||||
})
|
||||
|
||||
const badMethodIssues = computed(() => {
|
||||
const issues = {
|
||||
md5: [
|
||||
'⚡ 快速哈希：1秒可计算数十亿次',
|
||||
'🌈 彩虹表攻击：常见密码可秒破',
|
||||
'🔓 无盐：相同密码产生相同哈希'
|
||||
],
|
||||
sha1: [
|
||||
'⚡ 快速哈希：比 MD5 慢一点，但仍然太快',
|
||||
'🌈 彩虹表攻击：同样 vulnerable',
|
||||
'🔓 无盐：相同密码产生相同哈希'
|
||||
],
|
||||
sha256: [
|
||||
'⚡ 快速哈希：虽然比 SHA1 慢，但仍不够',
|
||||
'🌈 彩虹表攻击：GPU 可加速破解',
|
||||
'🔓 无盐：相同密码产生相同哈希'
|
||||
]
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
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 lookupPassword = () => {
|
||||
const hash = lookupHash.value.trim()
|
||||
|
||||
if (!hash) {
|
||||
lookupResult.value = '请输入哈希值'
|
||||
return
|
||||
}
|
||||
|
||||
const found = rainbowTable.find((item) => item.hash === hash)
|
||||
|
||||
if (found) {
|
||||
lookupResult.value = `✅ 找到匹配：密码是 "${found.password}"`
|
||||
} else {
|
||||
lookupResult.value = '❌ 未在彩虹表中找到'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.password-hashing-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.method-selector {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.method-btn {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
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;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.lookup-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.lookup-input {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.lookup-input input {
|
||||
flex: 1;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.practice-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.practice-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.practice-content strong {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.practice-content p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
transform: rotate(90deg);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.rainbow-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,689 @@
|
||||
<!--
|
||||
SessionCookieDemo.vue
|
||||
Session + Cookie 工作流程演示
|
||||
-->
|
||||
<template>
|
||||
<div class="session-cookie-demo">
|
||||
<div class="header">
|
||||
<div class="title">Session + Cookie 工作流程</div>
|
||||
<div class="subtitle">Web 开发的经典鉴权方案</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>
|
||||
<button
|
||||
class="action-btn request"
|
||||
@click="performRequest"
|
||||
:disabled="!isLoggedIn"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="connection">
|
||||
<div class="connection-line" :class="{ active: isTransferring }">
|
||||
<div class="data-packet" v-if="isTransferring">
|
||||
{{ transferData }}
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } 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 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 }
|
||||
]
|
||||
},
|
||||
request: {
|
||||
steps: [
|
||||
{ text: '浏览器自动带上 Cookie', active: false },
|
||||
{ text: '服务器根据 session_id 查找 Session', active: false },
|
||||
{ text: '找到 Session，验证通过', active: false },
|
||||
{ text: '返回请求的数据', active: false }
|
||||
]
|
||||
},
|
||||
logout: {
|
||||
steps: [
|
||||
{ text: '用户点击退出', active: false },
|
||||
{ text: '服务器删除 Session', active: false },
|
||||
{ text: '清除浏览器 Cookie', active: false },
|
||||
{ text: '退出成功', active: false }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const performLogin = async () => {
|
||||
const sessionId = generateSessionId()
|
||||
const stepsData = steps.login
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
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))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.session-cookie-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
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;
|
||||
}
|
||||
|
||||
.action-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;
|
||||
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;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.card-list li {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.info-card.pros .card-list li {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.info-card.cons .card-list li {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.client-server {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.connection {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,890 @@
|
||||
<!--
|
||||
SessionVsJWTDemo.vue
|
||||
Session vs JWT 对比演示
|
||||
-->
|
||||
<template>
|
||||
<div class="session-vs-jwt-demo">
|
||||
<div class="header">
|
||||
<div class="title">Session vs JWT：全方位对比</div>
|
||||
<div class="subtitle">两种主流鉴权方案的优劣势分析</div>
|
||||
</div>
|
||||
|
||||
<div class="scenario-selector">
|
||||
<div class="selector-title">选择场景</div>
|
||||
<div class="scenario-buttons">
|
||||
<button
|
||||
v-for="scenario in scenarios"
|
||||
:key="scenario.key"
|
||||
class="scenario-btn"
|
||||
:class="{ active: selectedScenario === scenario.key }"
|
||||
@click="selectScenario(scenario.key)"
|
||||
>
|
||||
<span class="scenario-icon">{{ scenario.icon }}</span>
|
||||
<span class="scenario-label">{{ scenario.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-table" v-if="selectedScenario">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>对比维度</th>
|
||||
<th class="session-col">Session + Cookie</th>
|
||||
<th class="jwt-col">JWT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(row, index) in getCurrentScenarioRows()"
|
||||
:key="index"
|
||||
:class="{ highlight: row.highlight }"
|
||||
>
|
||||
<td class="dimension">{{ row.dimension }}</td>
|
||||
<td class="session-cell">
|
||||
<div class="cell-content">
|
||||
<span class="cell-icon">{{ row.session.icon }}</span>
|
||||
<span class="cell-text">{{ row.session.text }}</span>
|
||||
<span class="cell-score" :class="row.session.scoreClass">
|
||||
{{ row.session.score }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="jwt-cell">
|
||||
<div class="cell-content">
|
||||
<span class="cell-icon">{{ row.jwt.icon }}</span>
|
||||
<span class="cell-text">{{ row.jwt.text }}</span>
|
||||
<span class="cell-score" :class="row.jwt.scoreClass">
|
||||
{{ row.jwt.score }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="recommendation" v-if="selectedScenario">
|
||||
<div class="rec-header">
|
||||
<div class="rec-icon">{{ currentRecommendation.icon }}</div>
|
||||
<div class="rec-title">{{ currentRecommendation.title }}</div>
|
||||
</div>
|
||||
<div class="rec-content">
|
||||
<div class="rec-winner">
|
||||
推荐方案：{{ currentRecommendation.winner }}
|
||||
</div>
|
||||
<div class="rec-reason">{{ currentRecommendation.reason }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quick-guide">
|
||||
<div class="guide-title">快速选择指南</div>
|
||||
<div class="guide-cards">
|
||||
<div class="guide-card session-card">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🍪</div>
|
||||
<div class="card-title">选择 Session + Cookie</div>
|
||||
</div>
|
||||
<ul class="card-list">
|
||||
<li>✅ 传统 Web 应用（服务器端渲染）</li>
|
||||
<li>✅ 需要服务端主动控制用户会话</li>
|
||||
<li>✅ 单体应用，不需要跨域</li>
|
||||
<li>✅ 对安全性要求极高的场景</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="guide-card jwt-card">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🎫</div>
|
||||
<div class="card-title">选择 JWT</div>
|
||||
</div>
|
||||
<ul class="card-list">
|
||||
<li>✅ 前后端分离的 SPA 应用</li>
|
||||
<li>✅ 移动端 App（iOS/Android）</li>
|
||||
<li>✅ 微服务架构</li>
|
||||
<li>✅ 需要跨域访问的 API</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="architecture-comparison">
|
||||
<div class="arch-title">架构对比</div>
|
||||
<div class="arch-diagrams">
|
||||
<div class="arch-item session-arch">
|
||||
<div class="arch-label">Session 架构</div>
|
||||
<div class="arch-content">
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">1️⃣</span>
|
||||
<span class="step-text">用户登录</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">2️⃣</span>
|
||||
<span class="step-text">服务器创建 Session</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step server-storage">
|
||||
<span class="step-icon">💾</span>
|
||||
<span class="step-text">存储到 Redis/Memory</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">3️⃣</span>
|
||||
<span class="step-text">返回 Cookie</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">4️⃣</span>
|
||||
<span class="step-text">每次请求自动带上</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arch-note">有状态：需要存储 Session</div>
|
||||
</div>
|
||||
|
||||
<div class="arch-item jwt-arch">
|
||||
<div class="arch-label">JWT 架构</div>
|
||||
<div class="arch-content">
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">1️⃣</span>
|
||||
<span class="step-text">用户登录</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">2️⃣</span>
|
||||
<span class="step-text">服务器生成 JWT</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step client-storage">
|
||||
<span class="step-icon">💾</span>
|
||||
<span class="step-text">客户端存储 Token</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">3️⃣</span>
|
||||
<span class="step-text">返回 Token</span>
|
||||
</div>
|
||||
<div class="arch-arrow">↓</div>
|
||||
<div class="arch-step">
|
||||
<span class="step-icon">4️⃣</span>
|
||||
<span class="step-text">每次请求在 Header 携带</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arch-note">无状态：不存储用户会话</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const selectedScenario = ref('spa')
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'spa', label: '前后端分离', icon: '🌐' },
|
||||
{ key: 'mobile', label: '移动端', icon: '📱' },
|
||||
{ key: 'microservice', label: '微服务', icon: '🔧' },
|
||||
{ key: 'traditional', label: '传统 Web', icon: '🖥️' },
|
||||
{ key: 'security', label: '高安全需求', icon: '🔒' }
|
||||
]
|
||||
|
||||
const scenarioData = {
|
||||
spa: {
|
||||
rows: [
|
||||
{
|
||||
dimension: '跨域支持',
|
||||
session: {
|
||||
icon: '❌',
|
||||
text: 'Cookie 无法跨域',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: 'Header 携带，完美支持',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '实现复杂度',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: '需要处理 CORS 和 Cookie',
|
||||
score: '⭐⭐⭐',
|
||||
scoreClass: 'medium'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '简单，localStorage + Header',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: false
|
||||
},
|
||||
{
|
||||
dimension: '扩展性',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: '有状态，扩展困难',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '无状态，易于扩展',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '安全性',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: '易受 CSRF 攻击',
|
||||
score: '⭐⭐⭐',
|
||||
scoreClass: 'medium'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '天然防 CSRF',
|
||||
score: '⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: false
|
||||
}
|
||||
],
|
||||
recommendation: {
|
||||
icon: '🏆',
|
||||
title: '推荐方案',
|
||||
winner: 'JWT',
|
||||
reason:
|
||||
'前后端分离架构下，JWT 的无状态特性和跨域优势使其成为最佳选择。避免 Cookie 的跨域问题，且更易于扩展。'
|
||||
}
|
||||
},
|
||||
mobile: {
|
||||
rows: [
|
||||
{
|
||||
dimension: '移动端支持',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: 'Cookie 管理复杂',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '原生支持，存储简单',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '网络开销',
|
||||
session: {
|
||||
icon: '✅',
|
||||
text: '只传 session_id',
|
||||
score: '⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
jwt: {
|
||||
icon: '⚠️',
|
||||
text: 'Token 较大',
|
||||
score: '⭐⭐⭐',
|
||||
scoreClass: 'medium'
|
||||
},
|
||||
highlight: false
|
||||
},
|
||||
{
|
||||
dimension: '离线能力',
|
||||
session: {
|
||||
icon: '❌',
|
||||
text: '必须联网验证',
|
||||
score: '⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '可离线解析基本信息',
|
||||
score: '⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: true
|
||||
}
|
||||
],
|
||||
recommendation: {
|
||||
icon: '🏆',
|
||||
title: '推荐方案',
|
||||
winner: 'JWT',
|
||||
reason:
|
||||
'移动端原生应用没有浏览器的 Cookie 机制，JWT 更适合。可以轻松存储在 UserDefaults/SharedPreferences 中。'
|
||||
}
|
||||
},
|
||||
microservice: {
|
||||
rows: [
|
||||
{
|
||||
dimension: '服务间通信',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: '需要共享 Session 存储',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '直接传递 Token',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '水平扩展',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: '需要 Redis 共享',
|
||||
score: '⭐⭐⭐',
|
||||
scoreClass: 'medium'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '无状态，任意服务器可验证',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '性能',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: '每次请求查 Redis',
|
||||
score: '⭐⭐⭐',
|
||||
scoreClass: 'medium'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '直接验证签名',
|
||||
score: '⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: false
|
||||
}
|
||||
],
|
||||
recommendation: {
|
||||
icon: '🏆',
|
||||
title: '推荐方案',
|
||||
winner: 'JWT',
|
||||
reason:
|
||||
'微服务架构下，JWT 的无状态特性是巨大优势。不需要在服务间共享 Session，任何服务都可以独立验证 Token。'
|
||||
}
|
||||
},
|
||||
traditional: {
|
||||
rows: [
|
||||
{
|
||||
dimension: '实现难度',
|
||||
session: {
|
||||
icon: '✅',
|
||||
text: '框架内置支持',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
jwt: {
|
||||
icon: '⚠️',
|
||||
text: '需要额外集成',
|
||||
score: '⭐⭐⭐',
|
||||
scoreClass: 'medium'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '会话管理',
|
||||
session: {
|
||||
icon: '✅',
|
||||
text: '可主动注销',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
jwt: {
|
||||
icon: '⚠️',
|
||||
text: '无法主动注销',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '安全性',
|
||||
session: {
|
||||
icon: '✅',
|
||||
text: 'HttpOnly Cookie',
|
||||
score: '⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
jwt: {
|
||||
icon: '⚠️',
|
||||
text: 'XSS 风险',
|
||||
score: '⭐⭐⭐',
|
||||
scoreClass: 'medium'
|
||||
},
|
||||
highlight: false
|
||||
}
|
||||
],
|
||||
recommendation: {
|
||||
icon: '🏆',
|
||||
title: '推荐方案',
|
||||
winner: 'Session + Cookie',
|
||||
reason:
|
||||
'传统 Web 应用（如 PHP、Java Web）通常有成熟的 Session 机制，实现简单且安全。主动注销功能很重要。'
|
||||
}
|
||||
},
|
||||
security: {
|
||||
rows: [
|
||||
{
|
||||
dimension: '防篡改',
|
||||
session: {
|
||||
icon: '✅',
|
||||
text: '服务端存储，无法篡改',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '签名防篡改',
|
||||
score: '⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: false
|
||||
},
|
||||
{
|
||||
dimension: '防 CSRF',
|
||||
session: {
|
||||
icon: '⚠️',
|
||||
text: '易受攻击',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
jwt: {
|
||||
icon: '✅',
|
||||
text: '天然免疫',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '防 XSS',
|
||||
session: {
|
||||
icon: '✅',
|
||||
text: 'HttpOnly Cookie',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
jwt: {
|
||||
icon: '⚠️',
|
||||
text: 'localStorage 可被读取',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
dimension: '主动注销',
|
||||
session: {
|
||||
icon: '✅',
|
||||
text: '立即删除 Session',
|
||||
score: '⭐⭐⭐⭐⭐',
|
||||
scoreClass: 'high'
|
||||
},
|
||||
jwt: {
|
||||
icon: '❌',
|
||||
text: '需黑名单机制',
|
||||
score: '⭐⭐',
|
||||
scoreClass: 'low'
|
||||
},
|
||||
highlight: true
|
||||
}
|
||||
],
|
||||
recommendation: {
|
||||
icon: '⚖️',
|
||||
title: '推荐方案',
|
||||
winner: '视情况而定',
|
||||
reason:
|
||||
'高安全场景下，Session + Cookie（HttpOnly）通常更安全。但如果 CSRF 是主要威胁，JWT 可能更好。建议结合实际威胁模型选择。'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getCurrentScenarioRows = () => {
|
||||
return scenarioData[selectedScenario.value]?.rows || []
|
||||
}
|
||||
|
||||
const currentRecommendation = computed(() => {
|
||||
return (
|
||||
scenarioData[selectedScenario.value]?.recommendation || {
|
||||
icon: '❓',
|
||||
title: '推荐方案',
|
||||
winner: '未知',
|
||||
reason: '请选择一个场景'
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
const selectScenario = (key) => {
|
||||
selectedScenario.value = key
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.session-vs-jwt-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.scenario-selector {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.selector-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.scenario-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.scenario-btn {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.scenario-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.scenario-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.scenario-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead th {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
border-bottom: 2px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
thead th.session-col {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
thead th.jwt-col {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr.highlight {
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
.dimension {
|
||||
padding: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cell-text {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.cell-score {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cell-score.high {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.cell-score.medium {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.cell-score.low {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.recommendation {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.rec-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.rec-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.rec-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rec-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.rec-winner {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.rec-reason {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.quick-guide {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.guide-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.guide-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.guide-card {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.card-list li {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.architecture-comparison {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.arch-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.arch-diagrams {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.arch-item {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.arch-label {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.arch-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.arch-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
font-size: 1.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.arch-arrow {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.server-storage,
|
||||
.client-storage {
|
||||
border-color: #f59e0b;
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.arch-note {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.scenario-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.guide-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.arch-diagrams {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user