在传统 Vue 应用中，登录认证流程通常是静态的：无论用户从哪台设备、什么网络环境访问，前端都只提供固定的用户名密码表单，顶多加一个图形验证码。这种一刀切的做法既牺牲了低风险用户的体验，又无法对高风险场景提供足够保护。自适应认证策略（Adaptive Authentication）的思路是根据实时风险信号动态调整认证强度，比如普通设备仅需密码登录，陌生设备额外要求短信验证码，而高风险环境则触发 TOTP 或临时禁用登录。Vue 3 的响应式系统、组合式 API 和动态组件机制，非常适合把这类策略设计成可配置、可扩展的工程化模块。
接下来从策略模型、工程化架构到具体代码，说明在 Vue 3 项目中如何落地自适应认证。
自适应认证策略的核心模型
自适应认证的核心不是前端去判断用户是否安全，而是前端采集必要的上下文信息，交由策略中心评估，最终得到当前会话所需的认证级别。认证级别可以是密码、短信、TOTP、甚至封禁。前端只负责执行策略并渲染对应的认证界面，最终的安全判断必须由后端兜底。
为了在 Vue 3 中实现可扩展的策略体系，首先需要定义清晰的 TypeScript 接口。上下文对象包含设备标识、IP 风险分、登录尝试次数、最近登录时间等信号，策略接口则根据上下文返回认证级别。下面是一个最小化的类型定义：
// 认证上下文：由前端采集并传给策略中心
export interface AuthContext {
deviceId: string
ipRiskScore: number
loginAttempts: number
lastLoginAt?: number
userAgent: string
}
// 认证级别：决定前端渲染哪种认证组件
export enum AuthLevel {
PASSWORD = 'password',
SMS = 'sms',
TOTP = 'totp',
BLOCKED = 'blocked'
}
// 策略接口：每个策略负责评估并返回认证级别
export interface AuthStrategy {
name: string
evaluate(ctx: AuthContext): AuthLevel
}
策略注册中心负责管理所有已注册的策略，并按顺序执行评估。一旦某个策略返回了比普通密码更高的认证级别，就立即采用该级别，否则继续执行后续策略。这种链式结构让新策略可以随时加入，而无需修改现有调用代码。
import { AuthContext, AuthLevel, AuthStrategy } from './types'
class AdaptiveAuthCenter {
private strategies: AuthStrategy[] = []
register(strategy: AuthStrategy) {
this.strategies.push(strategy)
}
evaluate(ctx: AuthContext): AuthLevel {
// 按注册顺序执行，第一个返回非 PASSWORD 级别即生效
for (const strategy of this.strategies) {
const level = strategy.evaluate(ctx)
if (level !== AuthLevel.PASSWORD) {
return level
}
}
return AuthLevel.PASSWORD
}
}
export const authCenter = new AdaptiveAuthCenter()
上下文采集需要注意隐私合规。浏览器提供的 navigator.userAgent 可以作为基础信号，但不建议在前端采集过于稳定的设备指纹（如 canvas fingerprint），更合理的做法是由后端在首次访问时生成一个会话级 deviceId，前端仅读取并存储该标识。
策略中心的工程化注册与依赖注入
在 Vue 3 应用中，策略中心可以直接以模块单例形式存在。简单项目里在应用入口注册默认策略即可，复杂项目则可以使用 provide/inject 进行依赖注入，便于测试和隔离。这里先展示单例注册方式：
// main.ts 中注册默认策略
import { authCenter } from './auth/AdaptiveAuthCenter'
import { newDeviceStrategy, highRiskStrategy } from './auth/strategies'
authCenter.register(newDeviceStrategy)
authCenter.register(highRiskStrategy)
策略本身应当轻量、无副作用，只依赖传入的上下文和可配置参数。例如新设备策略会检查当前设备 ID 是否在本地存储的已知设备列表中，如果不是则要求短信验证。这种策略可以独立测试和替换。
// strategies/newDeviceStrategy.ts
import { AuthContext, AuthLevel, AuthStrategy } from '../types'
export const newDeviceStrategy: AuthStrategy = {
name: 'new-device',
evaluate(ctx) {
// 如果设备 ID 不在本地存储的已知设备列表中，提升为短信验证
const knownDevices = JSON.parse(localStorage.getItem('known_devices') || '[]')
if (!knownDevices.includes(ctx.deviceId)) {
return AuthLevel.SMS
}
return AuthLevel.PASSWORD
}
}
实际工程中，策略参数不应硬编码在前端。更好的做法是从后端下发策略配置，前端启动时拉取并缓存到 Pinia 或模块变量。这样调整认证门槛时无需发版更新前端代码。下面的服务函数演示了如何缓存远程配置：
// services/authConfig.ts
export interface RemoteAuthConfig {
newDeviceSmsEnabled: boolean
highRiskScoreThreshold: number
totpRequiredForSuspicious: boolean
}
let cachedConfig: RemoteAuthConfig | null = null
export async function fetchAuthConfig(): Promise<RemoteAuthConfig> {
if (cachedConfig) return cachedConfig
const res = await fetch('/api/auth/config')
cachedConfig = await res.json()
return cachedConfig
}
路由守卫与动态组件渲染
组合式 API 非常适合封装自适应认证逻辑。通过 useAdaptiveAuth 可以统一暴露当前认证级别、加载状态以及便捷的计算属性，让登录页面和路由守卫复用同一套评估逻辑。
// composables/useAdaptiveAuth.ts
import { ref, computed } from 'vue'
import { authCenter } from '../auth/AdaptiveAuthCenter'
import { AuthContext, AuthLevel } from '../auth/types'
export function useAdaptiveAuth() {
const currentLevel = ref<AuthLevel>(AuthLevel.PASSWORD)
const loading = ref(false)
async function evaluate(context: AuthContext) {
loading.value = true
// 可加入防抖或缓存检查
currentLevel.value = authCenter.evaluate(context)
loading.value = false
}
const needSms = computed(() => currentLevel.value === AuthLevel.SMS)
const needTotp = computed(() => currentLevel.value === AuthLevel.TOTP)
return { currentLevel, loading, evaluate, needSms, needTotp }
}
登录页面根据认证级别动态渲染不同的组件。Vue 3 的动态组件机制配合 <component> 标签可以轻松实现这一需求。当策略返回 sms 时渲染短信验证组件，返回 totp 时渲染动态口令组件，普通情况则显示密码登录。
<template>
<div class="auth-container">
<component :is="authComponent" :loading="loading" @success="onSuccess" />
</div>
</template>
<script setup lang="ts">
import { computed, onMounted } from 'vue'
import PasswordLogin from './components/PasswordLogin.vue'
import SmsLogin from './components/SmsLogin.vue'
import TotpLogin from './components/TotpLogin.vue'
import { useAdaptiveAuth } from './composables/useAdaptiveAuth'
const { currentLevel, evaluate, loading } = useAdaptiveAuth()
const authComponent = computed(() => {
switch (currentLevel.value) {
case 'sms':
return SmsLogin
case 'totp':
return TotpLogin
case 'blocked':
return null
default:
return PasswordLogin
}
})
onMounted(async () => {
await evaluate({
deviceId: 'device-fingerprint-placeholder',
ipRiskScore: 0,
loginAttempts: 0,
userAgent: navigator.userAgent
})
})
</script>
除了登录页面，受保护路由也需要在进入前触发策略评估。路由守卫可以拦截访问请求，根据评估结果决定放行、重定向到增强认证页，或者直接封禁。这样可以避免用户绕过前端登录页直接访问受保护资源。
// router/guards.ts
import { authCenter } from '../auth/AdaptiveAuthCenter'
import { AuthLevel } from '../auth/types'
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
const ctx = {
deviceId: localStorage.getItem('device_id') || 'unknown',
ipRiskScore: 0, // 实际可从后端获取
loginAttempts: Number(localStorage.getItem('login_attempts') || 0),
userAgent: navigator.userAgent
}
const level = authCenter.evaluate(ctx)
if (level === AuthLevel.BLOCKED) {
next('/auth/blocked')
} else if (level === AuthLevel.SMS || level === AuthLevel.TOTP) {
next({ path: '/auth/verify', query: { level } })
} else {
next()
}
} else {
next()
}
})
缓存优化与安全兜底
如果在每次路由切换时都重新计算策略，会造成不必要的性能开销。尤其是策略内部涉及本地存储读取或远程配置解析时，重复计算会影响页面响应速度。可以在策略中心内部增加一个基于会话上下文的缓存层，同一设备在短时间内变化不大时直接返回已有结果。
// 在 AdaptiveAuthCenter 中增加缓存
private cache = new Map<string, AuthLevel>()
evaluate(ctx: AuthContext): AuthLevel {
const cacheKey = `${ctx.deviceId}_${ctx.userAgent}`
if (this.cache.has(cacheKey)) {
return this.cache.get(cacheKey)!
}
// ... 原有评估逻辑
const level = this.runStrategies(ctx)
this.cache.set(cacheKey, level)
return level
}
缓存并非永久有效，登录成功、退出登录、设备状态变化或后端风险信号更新时都需要主动清空缓存。否则用户可能一直停留在旧的认证级别，导致安全策略失效。
前端自适应认证最大的误区是把安全决策完全交给客户端。攻击者可以修改前端代码绕过认证级别判断，直接提交最终凭证。因此正确的架构是后端同样评估风险并返回所需认证级别，前端仅负责渲染界面和收集用户输入。下面是一个更贴近真实场景的调用方式：
// 向后端发起登录请求，后端根据风险返回所需认证级别
const { data } = await loginApi.attemptLogin({ username, password, deviceId })
if (data.requiredAuthLevel === 'sms') {
await sendSmsCode()
} else if (data.requiredAuthLevel === 'totp') {
// 渲染 TOTP 输入
}
这种模式下，前端策略中心可以退化为纯展示辅助逻辑，或者与后端返回的级别进行合并。既保证了体验，又避免了安全漏洞。测试方面，策略中心可以使用 Vitest 进行单元测试，模拟不同上下文验证返回级别；登录组件可以使用 Vue Test Utils 验证动态组件切换是否符合预期。
import { describe, it, expect } from 'vitest'
import { authCenter } from './AdaptiveAuthCenter'
import { newDeviceStrategy } from './strategies/newDeviceStrategy'
describe('newDeviceStrategy', () => {
it('should require SMS for new device', () => {
authCenter.register(newDeviceStrategy)
const level = authCenter.evaluate({ deviceId: 'new', ipRiskScore: 0, loginAttempts: 0, userAgent: 'test' })
expect(level).toBe('sms')
})
})
自适应认证策略在 Vue 3 中不是简单添加几个条件判断，而是通过策略接口、注册中心、动态组件和路由守卫构建一套可扩展的前端认证体系。核心思路是让认证强度随风险信号动态变化，同时保持前端逻辑清晰、可测试、可维护，最终把安全决策权限交给后端，实现体验与安全的平衡。