.NET MAUI登出功能实现：登出后如何动态刷新所有页面？

不用每个页面初始化时只做一次检查，以下几种方案可以帮你实现登录状态的动态同步：

1. 全局状态管理（推荐） #

把登录状态存在全局状态容器里（比如Vuex、Redux、React Context），所有依赖登录状态的组件直接订阅这个状态。登出时只需要修改全局状态，所有关联组件会自动更新，完全不需要手动刷新页面。

举个React Context的简单示例：

// 全局Auth上下文
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('token'));

  const logout = () => {
    // 执行登出逻辑：清除token、调用后端登出接口等
    localStorage.removeItem('token');
    setIsLoggedIn(false);
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 封装自定义hooks方便组件调用
export function useAuth() {
  return useContext(AuthContext);
}

// 页面组件中使用状态
function UserProfile() {
  const { isLoggedIn } = useAuth();
  return isLoggedIn ? <div>个人资料内容</div> : <div>请先登录</div>;
}

只要调用logout()修改全局状态，所有用到isLoggedIn的组件会立刻更新内容。

2. 全局事件监听 #

如果不想引入状态管理库，可以利用浏览器的自定义事件实现全局通知。登出时触发一个全局事件，所有需要感知状态变化的组件监听这个事件，收到通知后更新本地状态或重新校验登录状态。

示例代码：

// 登出操作时触发事件
function handleLogout() {
  localStorage.removeItem('token');
  // 触发全局登出事件
  window.dispatchEvent(new CustomEvent('userLoggedOut'));
}

// 在React组件中监听事件
useEffect(() => {
  const updateAuthState = () => {
    const currentLoginState = !!localStorage.getItem('token');
    setIsLoggedIn(currentLoginState);
  };
  window.addEventListener('userLoggedOut', updateAuthState);
  // 组件卸载时移除监听，避免内存泄漏
  return () => window.removeEventListener('userLoggedOut', updateAuthState);
}, []);

3. 路由守卫/全局路由拦截 #

对于单页应用，可以在路由跳转前统一校验登录状态，强制未登录用户跳转到登录页，或者确保页面内容匹配当前状态。

以Vue路由守卫为例：

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('token') !== null;
  // 标记了需要登录的页面，用户未登录则跳转登录页
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

这种方式可以配合全局状态使用，确保页面切换时状态始终同步。

4. 定时检查（不推荐） #

如果以上方案都无法落地，可以用定时器定期校验登录状态，但这种方式有延迟且消耗性能，仅作为应急方案：

useEffect(() => {
  const checkAuthInterval = setInterval(() => {
    setIsLoggedIn(!!localStorage.getItem('token'));
  }, 1500); // 每1.5秒检查一次
  return () => clearInterval(checkAuthInterval);
}, []);

内容的提问来源于stack exchange，提问作者Enoch Mwangi