前端AppShell介绍(Application Shell,应用外壳)(前端应用的一个全局布局/外壳组件,它定义了登录后可用区域的整体页面框架)应用骨架
此前根路径会把所有访客(包括搜索引擎爬虫)强制重定向到 Keycloak 登录页,导致 站点没有任何可索引内容,B2C 自助注册漏斗也缺少产品展示入口。本次将 App Router 重组为两个路由组:(marketing)—— 公开、i18n-ready 的落地页(Hero、六张功能 卡片、托管与自托管模式对比、GitHub 链接);(app)—— AuthProvider 与 AppShell 从根 layout 下移至此,登录强制边界精确收缩到应用页面(URL 不变)。keycloak-js 初始化改为initKeycloak()记忆化单例:落地页执行静默 check-sso(新增 public/silent-check-sso.html),老用户回访时 CTA 变为进入 Dashboard;应用路 由保持 login-required 语义;登出后回到公开落地页,不再被弹回 Keycloak。SEO 方 面:基于新的运行时 SITE_URL 环境变量(12-factor,已接入 base 与 prod compose)按请求生成 canonical/OG/Twitter 元数据与 og-image;robots.txt 屏蔽应用路由;新 增 sitemap.xml;Caddy 为 auth.子域名添加 X-Robots-Tag noindex。E2E 冒烟围绕落 地页入口重写(6个测试,含静默 SSO 回访与登出回落地页),已在本地对重建镜像全 部通过;lint/type-check/build 与完整单元测试套件均通过。文章目录前端AppShell介绍什么是 AppShell在你的项目中具体是什么一句话总结前端AppShell介绍根据你提供的项目描述以及前端开发的通用概念AppShellApplication Shell应用外壳可以这样理解什么是 AppShellAppShell是前端应用的一个全局布局/外壳组件它定义了登录后可用区域的整体页面框架通常包含元素说明顶部导航栏 (Header/Navbar)Logo、用户头像、菜单等侧边栏 (Sidebar)应用内导航菜单主内容区域 (Content Area)通过{children}渲染具体页面全局状态/上下文如 AuthProvider 提供的登录态简单来说AppShell 就是用户登录后看到的应用骨架——不管切换到哪个子页面这个外壳始终存在。在你的项目中具体是什么根据描述(app) —— AuthProvider 与 AppShell 从根 layout 下移至此在重构之前AppShell和AuthProvider放在根 layout里这意味着所有页面包括根路径/都会走登录流程被强制跳转到 Keycloak 登录页在重构之后AppShell和AuthProvider被下移到(app)路由组只有访问/app/*等应用页面时才会触发认证和应用外壳根路径/现在走(marketing)路由组展示公开的落地页不再需要登录一句话总结AppShell 登录后的应用框架导航栏 侧边栏 内容区它和 AuthProvider 绑定在一起构成了需要认证才能访问的应用界面外壳。把它从根路由移走就是为了把公开落地页和需要登录的应用页面分开。

相关新闻

SOLO游戏14技能组合全攻略:攻防循环与实战解析

SOLO游戏14技能组合全攻略:攻防循环与实战解析

1. 项目概述:SOLO游戏全技能通关指南"SOLO必带14个技能,一篇通关全攻略"这个标题直指单机游戏玩家最核心的痛点——如何在单人模式下通过合理配置技能组合实现高效通关。作为从业十余年的游戏策略分析师,我见过太多玩家在技能选择上…

2026/7/21 3:52:26阅读更多 →
Skills商店爆款技能解析与内容创作指南

Skills商店爆款技能解析与内容创作指南

1. 项目背景与核心价值最近在技能共享领域出现了一个现象级产品——Skills商店。这个平台上线不到三个月,就有超过5万用户主动上传了自己的技能学习报告。作为第一批深度体验者,我完整跟踪了平台从冷启动到爆发的全过程,尤其关注了长期占据To…

2026/7/21 3:52:26阅读更多 →
Kotlin Multiplatform项目结构优化与迁移实践

Kotlin Multiplatform项目结构优化与迁移实践

1. Kotlin Multiplatform 项目结构演进背景Kotlin Multiplatform(KMP)技术自2017年推出以来,项目结构经历了多次重大调整。2023年JetBrains官方发布的1.9.20版本中,首次引入了全新的默认项目结构标准,这标志着KMP技术正…

2026/7/21 3:52:26阅读更多 →
如何用audioMotion-analyzer打造专业级音频可视化效果

如何用audioMotion-analyzer打造专业级音频可视化效果

如何用audioMotion-analyzer打造专业级音频可视化效果 【免费下载链接】audioMotion-analyzer High-resolution real-time graphic audio spectrum analyzer JavaScript module with no dependencies. 项目地址: https://gitcode.com/gh_mirrors/au/audioMotion-analyzer …

2026/7/21 14:59:10阅读更多 →
如何彻底解决yuzu模拟器中文乱码问题:从诊断到完美修复的终极指南

如何彻底解决yuzu模拟器中文乱码问题:从诊断到完美修复的终极指南

如何彻底解决yuzu模拟器中文乱码问题:从诊断到完美修复的终极指南 【免费下载链接】yuzu-downloads 项目地址: https://gitcode.com/GitHub_Trending/yu/yuzu-downloads 还在为yuzu模拟器中文字体显示为方块或乱码而烦恼吗?🤔 作为Ni…

2026/7/21 14:59:10阅读更多 →
网络配置备份终极指南:为什么你需要使用Oxidized?

网络配置备份终极指南:为什么你需要使用Oxidized?

网络配置备份终极指南:为什么你需要使用Oxidized? 【免费下载链接】oxidized Oxidized is a network device configuration backup tool. Its a RANCID replacement! 项目地址: https://gitcode.com/GitHub_Trending/ox/oxidized 在网络运维的世界…

2026/7/21 14:59:10阅读更多 →
当你的视频收藏变成数字迷宫,这个开源工具如何让你重获掌控权

当你的视频收藏变成数字迷宫,这个开源工具如何让你重获掌控权

当你的视频收藏变成数字迷宫,这个开源工具如何让你重获掌控权 【免费下载链接】Video-Hub-App Official repository for Video Hub App 项目地址: https://gitcode.com/gh_mirrors/vi/Video-Hub-App 你是否曾经在电脑里翻找了半个小时,只为找到上…

2026/7/21 14:59:10阅读更多 →
终极指南:如何使用go-cursor-help一键解决Cursor AI编辑器试用限制

终极指南:如何使用go-cursor-help一键解决Cursor AI编辑器试用限制

终极指南:如何使用go-cursor-help一键解决Cursor AI编辑器试用限制 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Your request has been blocked as our system has detected suspicious activity / Youve reached your trial req…

2026/7/21 14:59:10阅读更多 →
怎样5分钟搭建跨平台社交媒体数据采集系统:MediaCrawler全攻略

怎样5分钟搭建跨平台社交媒体数据采集系统:MediaCrawler全攻略

怎样5分钟搭建跨平台社交媒体数据采集系统:MediaCrawler全攻略 【免费下载链接】MediaCrawler 项目地址: https://gitcode.com/GitHub_Trending/mediacr/MediaCrawler 还在为手动收集小红书、抖音、B站、微博、快手的数据而烦恼吗?想象一下&…

2026/7/21 14:57:10阅读更多 →
Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中,我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源,还是配置文件、证书等,都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下,但这…

2026/7/21 0:51:49阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP(轻量级目录访问协议)作为企业级身份认证的黄金标准,已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时,发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/21 0:51:49阅读更多 →
【AI面试官实战指南】:用ChatGPT模拟10类高频技术岗面试,3天提升应答精准度92%

【AI面试官实战指南】:用ChatGPT模拟10类高频技术岗面试,3天提升应答精准度92%

更多请点击: https://intelliparadigm.com 第一章:AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”,而是以可解释、可审计、可迭代的方式,赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/21 0:51:49阅读更多 →
Windows+macOS 通用 OpenClaw 部署流程,内置依赖一键启动智能桌面助手

Windows+macOS 通用 OpenClaw 部署流程,内置依赖一键启动智能桌面助手

📌教程适配:OpenClaw v2.7.9 | 兼容 Windows10/11、macOS 双系统 📖前言 当下各类本地 AI 工具层出不穷,多数产品仅能完成文字问答交互,很难直接操控电脑执行实际操作。OpenClaw,业内常称小龙虾 AI&#…

2026/7/21 0:01:46阅读更多 →
Codex 接入后 Bug 反增?复盘从个人演示到团队协作的“流程陷阱”

Codex 接入后 Bug 反增?复盘从个人演示到团队协作的“流程陷阱”

聊《一次Codex项目复盘,问题最后出在流程而不是模型》之前,先说一句实在的:别急着背概念,先看它在真实项目里到底解决什么问题。摘要先把这篇文章的目标说清楚:看完之后,你应该能判断这件事值不值得做&…

2026/7/21 0:01:46阅读更多 →
手把手搓一个五子棋游戏,零代码也能当“游戏开发者”

手把手搓一个五子棋游戏,零代码也能当“游戏开发者”

大家好,还是我。前几期带大家做了心情日记本和可视化大屏,后台有朋友留言:“能不能教点好玩的?我想做游戏,但一行代码都不会。”行,这期就安排。今天的目标:从零做一个五子棋游戏。 带AI对战、三…

2026/7/21 0:03:46阅读更多 →
YOLOv8推理性能优化:从1.2FPS到35FPS的全链路加速实践

YOLOv8推理性能优化:从1.2FPS到35FPS的全链路加速实践

如果你在部署 YOLOv8 时,发现推理速度只有可怜的 1-2 FPS,而别人的演示视频却能跑到 30 FPS 以上,那么问题很可能不在模型本身,而在于你的整个处理链路。很多开发者拿到一个训练好的 YOLOv8 模型后,会直接使用官方示例…

2026/7/20 22:51:39阅读更多 →
Coze与Dify对比指南:低代码AI应用开发从入门到实战

Coze与Dify对比指南:低代码AI应用开发从入门到实战

1. 从零到一:为什么你需要了解 Coze 和 Dify?如果你对 AI 应用开发感兴趣,但一看到“大模型”、“智能体”、“工作流”这些词就头疼,觉得门槛太高,那这篇文章就是为你准备的。很多开发者,包括我自己&#…

2026/7/20 18:51:18阅读更多 →
AI生图工具怎么选?2026年6月版实测对比

AI生图工具怎么选?2026年6月版实测对比

做自媒体的朋友应该都有体会:配图一直是个让人头疼的问题。2026年,AI生图工具已经非常成熟了,但工具太多反而不知道怎么选。以下是截至2026年6月我对主流AI生图工具的实测对比。Midjourney V8.1:速度之王2026年6月11日&#xff0c…

2026/7/20 18:51:18阅读更多 →