zlwu
afe3e234e9
✨ 新增功能: - 全局路由守卫模块 (route-guard.js) - 多层次权限验证 (登录状态+Token存在+Token过期检查) - 自动拦截机制 (页面级+跳转级+HTTP级+应用级) - 401响应自动处理和跳转 - 路由守卫测试页面 🔧 技术实现: - checkPageAccess() 全局页面权限检查 - guardedNavigate/guardedSwitchTab 带权限检查的跳转 - handleUnauthorized() HTTP拦截器401处理 - 公开页面配置管理 - 优雅的错误提示和跳转逻辑 📱 页面集成: - App.vue 初始化路由守卫 - profile/workbench 页面添加权限检查 - index 页面优化跳转逻辑 - 新增测试页面验证功能 📚 文档完善: - 移动端路由守卫使用指南 - 详细的变更记录和技术说明 - 最佳实践和注意事项 🎯 核心效果: 用户登录失效或未登录时，访问任何需要权限的页面都自动跳转到登录页，提升安全性和用户体验。
78 lines
3.1 KiB
HTML
78 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
/>
|
|
<title>移动端登录原型</title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- FontAwesome CDN -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
|
|
/>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #5d87ff 0%, #a3bfff 100%);
|
|
}
|
|
.brand-color {
|
|
color: #5d87ff;
|
|
}
|
|
.brand-bg {
|
|
background-color: #5d87ff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body
|
|
class="min-h-screen flex flex-col justify-center items-center bg-gradient-to-br from-[#5D87FF] to-[#a3bfff]"
|
|
>
|
|
<div
|
|
class="w-full max-w-xs mx-auto bg-white/80 rounded-2xl shadow-lg p-8 flex flex-col items-center"
|
|
>
|
|
<!-- Logo -->
|
|
<div class="mb-6">
|
|
<i class="fa-solid fa-graduation-cap text-5xl brand-color"></i>
|
|
</div>
|
|
<!-- 标题 -->
|
|
<h1 class="text-2xl font-bold text-gray-800 mb-2">智慧校园</h1>
|
|
<p class="text-sm text-gray-500 mb-8">杭州第一技师学院</p>
|
|
<!-- 登录表单 -->
|
|
<form class="w-full flex flex-col gap-4">
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
|
<i class="fa-regular fa-user"></i>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="账号"
|
|
class="pl-10 pr-3 py-2 w-full rounded-lg border border-gray-200 focus:border-[#5D87FF] focus:ring-2 focus:ring-[#5D87FF]/30 outline-none bg-white text-gray-800 transition"
|
|
/>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
|
<i class="fa-solid fa-lock"></i>
|
|
</span>
|
|
<input
|
|
type="password"
|
|
placeholder="密码"
|
|
class="pl-10 pr-3 py-2 w-full rounded-lg border border-gray-200 focus:border-[#5D87FF] focus:ring-2 focus:ring-[#5D87FF]/30 outline-none bg-white text-gray-800 transition"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="w-full py-2 mt-2 rounded-lg brand-bg text-white font-semibold text-lg shadow hover:opacity-90 transition"
|
|
>
|
|
登录
|
|
</button>
|
|
</form>
|
|
<!-- 版权信息 -->
|
|
<div class="mt-8 text-xs text-gray-400 text-center w-full">
|
|
© 2025 杭州第一技师学院 All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|