之前发布过文章《docsify简单配置应用》，使用docsify创建一个在线的文档网站，一般构建的网站是完全工公开的，但是也有可能这个文档站的内容需要授权才可访问。因此，优化这个站点构建功能，当未授权的时候禁止阅读。
接着前面文章的内容介绍，编写一个401页面，当用户退出的时候返回这个401页面。
<!DOCTYPE html>
<html>
<head>
<title>已退出</title>
<meta charset="utf-8">
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
h1 { color: #4CAF50; }
a { color: #1976D2; text-decoration: none; margin-top: 20px; display: inline-block; }
.loading {
display: none;
margin-top: 15px;
color: #666;
font-style: italic;
}
</style>
</head>
<body>
<h1>已成功退出</h1>
<p>您已安全退出系统，账户信息请勿外泄</p>
<a href="/" id="homeLink">返回首页</a>
<div class="loading" id="loading">正在刷新缓存，请稍候...</div>
<script>
document.getElementById('homeLink').addEventListener('click', function(e) {
e.preventDefault();
const link = this;
const loading = document.getElementById('loading');
// 显示加载状态
link.style.opacity = '0.7';
loading.style.display = 'block';
// 1. 清除Service Worker缓存（如果存在）
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations()
.then(registrations => {
const promises = registrations.map(reg => reg.unregister());
return Promise.all(promises);
})
.catch(() => {});
}
// 2. 清除本地存储中可能影响首页的缓存
try {
localStorage.removeItem('homepage_cache');
sessionStorage.clear();
} catch (e) {}
// 3. 关键优化：使用缓存策略强制刷新所有资源
const timestamp = new Date().getTime();
// 创建临时iframe用于预加载关键资源（可选，但更彻底）
const preloadIframe = document.createElement('iframe');
preloadIframe.style.display = 'none';
preloadIframe.src = `/?t=${timestamp}&preload=1`;
document.body.appendChild(preloadIframe);
// 4. 确保所有清理操作完成后跳转
setTimeout(() => {
// 直接跳转到带时间戳的首页（双重保障）
window.location.href = `/?t=${timestamp}`;
}, 300); // 给清理操作留出时间
});
</script>
</body>这样，当打卡文档页面的时候会提示用户输入登录信息，如果不输入则显示这个401页面，如果用户顺利退出登录，则也显示这个401页面，完美保护文档内容
