Javascript 在登录/注销后强制所有页面访问刷新/清除缓存

我的站点完全由动态数据构成，其中一些数据会根据用户身份验证进行更改。当用户“登录”到站点时，我会在页面导航栏中显示他们的新状态和用户名。但是，当他们在验证之前访问最近访问的页面时（后退按钮等），该页面的导航栏版本将不会刷新。有哪些方法可以强制浏览器刷新页面？反之亦然：如果用户注销，最近的页面仍将显示缓存版本的验证

我可以使用什么技术在网站的任何页面上始终强制浏览器端刷新/清除缓存

谢谢

---

注意：服务器端我使用eXist db 4.7的

login:set-user（）

通过控制器对用户进行身份验证（即“登录”）

我建议您查看线程，了解一些更具体的信息，但总结一下：

• 您需要检查登录状态是否已更改
• 如果有，您需要刷新页面

解决方案1） 第一步 您需要初始化全局变量，如下所示：

let loginStateChanged = false;

当用户登录或注销时，您将执行以下操作：

loginStateChanged = true;

isLoggedIn = /* login: true, logout: false */; // update global variable
localStorage.setItem('isLoggedIn', JSON.stringify(isLoggedIn)); // update localStorage variable

步骤2 如果登录状态已更改，则需要侦听“浏览器后退按钮事件”并刷新窗口

您可以像这样使用

pageshow

事件：

window.addEventListener('pageshow', (event) => {
    var isBackNavigation = event.persisted || 
        (typeof window.performance != 'undefined' && window.performance.navigation.type === 2);

    // If the navigation type is a back navigation, and the login
    // State has changed, refresh the window
    if (isBackNavigation && loginStateChanged) {
        window.location.reload(); // reload the page
    }
});

或者使用jQuery

$(window).on('popstate', () => {
    // If the login State has changed, refresh the window
    if (loginStateChanged) {
        window.location.reload(); // reload the page
    }
});

由于窗口已刷新，因此

loginStateChanged

将重置为其默认值

false

解决方案2） 或者，如果您需要为多个选项卡实施解决方案：

第一步 改用localStorage和全局变量：

let isLoggedIn = JSON.parse(localStorage.getItem('isLoggedIn')); // Get the initial value
isLoggedIn = isLoggedIn != 'undefined' ? isLoggedIn : false; // If initial value is undefined, set it to false

当用户登录或注销时，您将执行以下操作：

loginStateChanged = true;

isLoggedIn = /* login: true, logout: false */; // update global variable
localStorage.setItem('isLoggedIn', JSON.stringify(isLoggedIn)); // update localStorage variable

步骤2 解决方案3） 如果要在任何后退或前进单击时刷新，只需使用以下代码：

window.addEventListener('pageshow', (event) => {
    var isNavigation = event.persisted || 
        (typeof window.performance != 'undefined' && window.performance.navigation.type === 2);
    if (isNavigation) {
        window.location.reload();
    }
});

解决方案3测试文件： test1.html和test2.html（它们完全相同）：

测试
window.addEventListener（“页面显示”，函数（事件）{
var isNavigation=event.persistend |
（typeof window.performance！=“未定义”和&window.performance.navigation.type==2）；
log（“是否通过按钮导航？”，isBackNavigation）；
如果（isNavigation）{
警报（“重新加载！”）；
window.location.reload（）；
}
});

---

它将刷新每个导航操作的整个页面。在打开一个新标签时，它无论如何都会重新加载。

@MauriceNino已经涵盖了几乎所有的技术方法，尽管在某些场景中还有一种

这不是最好的解决方案，但是如果您的所有页面都是使用带有参数的特定动态url创建的，那么您只需添加一个新参数“v”或“version”=随机登录会话密钥

为了实现这一点，所有和任何URL（您不想缓存的）都应该与上述参数连接起来。创建一个集中式方法来调用ajax或页面，并添加此

version

参数。每次登录时，都会创建一个新的唯一参数。如果参数更改，浏览器将始终点击以请求新的请求

---

尽管这样做的缺点是你的URL不会很漂亮。你所有的URL都必须经过一个过滤器（我想你已经有了）

我找到的解决你问题的最佳来源是以下博客文章，它以一种连我都能理解的方式解释了缓存：

TLDR: 不要试图在客户端解决这个问题，让服务器来处理这个问题。 在服务器端添加以下响应头：

Cache-Control: no-cache

---

这将迫使页面在每次按下后刷新，而不是在登录状态更改时刷新。我建议您可以在每个页面上都有一个初始的“loginState”，该页面包含用户是否在页面加载期间登录。当用户登录或注销时，应更改本地存储变量。然后您的答案可能会被修改，包括检查初始登录状态是否仍然与本地存储值匹配，以决定是否刷新。@AlexanderDeSousa您是对的，我误解了。进行了一些更改，结果应该与您描述的相同，但没有localStorage。没有localStorage意味着您需要某种AJAX轮询来更改该状态，如果用户打开了多个选项卡/窗口，这将是低效的。如果您在登录/注销事件中设置了localStorage状态，则浏览器会同时注意到所有地方的更改。@对于多个选项卡，您是对的。但这与AJAX无关。感谢这些解决方案——在接受赏金之前，我必须先测试它们……非常棒的解决方案。到目前为止，在我的测试中效果非常好。