OneSignal自定义订阅铃铛：Web应用按登录状态控制显隐

嘿，我来帮你搞定这个OneSignal自定义订阅铃铛的显示控制问题！结合你给出的Hash路由场景，我们可以通过路由检测+登录状态判断来精准控制铃铛的显示/隐藏，具体实现步骤如下：

核心思路 #

我们需要同时满足两个条件才显示订阅铃铛：用户已登录，且当前处于dashboard页面；登录页面或未登录状态下，直接隐藏铃铛。

具体实现步骤 #

1. 监听路由变化（适配Hash模式） #

因为你的页面采用Hash路由（比如http://www.demo.com/#/login），我们可以监听hashchange事件实时检测当前页面路径，同时页面加载完成时也要执行一次初始检测：

// 监听路由切换
window.addEventListener('hashchange', () => {
  toggleOneSignalBell();
});
// 页面首次加载时执行一次
window.addEventListener('load', () => {
  toggleOneSignalBell();
});

2. 封装显示/隐藏铃铛的核心函数 #

编写一个函数，结合当前路由和登录状态来控制铃铛的显示状态：

function toggleOneSignalBell() {
  // 获取当前Hash路由（去掉开头的#）
  const currentPath = window.location.hash.slice(1);
  // 这里假设登录状态存在localStorage中，你可以替换成项目实际的登录状态判断逻辑
  const isLoggedIn = localStorage.getItem('authToken') !== null;

  // 获取OneSignal铃铛元素（替换成你自定义铃铛的实际选择器，比如类名/ID）
  const oneSignalBell = document.querySelector('.onesignal-bell-launcher');
  
  if (!oneSignalBell) return; // 如果元素未加载完成，直接返回

  // 判断显示条件：已登录 + 当前是dashboard页面
  if (isLoggedIn && currentPath === '/dashboard') {
    oneSignalBell.style.display = 'block';
    // 可选：如果之前未初始化OneSignal，这里可以触发初始化
    // OneSignal.init({ appId: '你的AppID', ...其他配置 });
  } else {
    oneSignalBell.style.display = 'none';
  }
}

3. 配置OneSignal初始化默认隐藏 #

为了避免页面加载时铃铛闪烁，建议在OneSignal初始化时先禁用默认显示，交由我们的函数控制：

OneSignal.init({
  appId: '你的OneSignal AppID',
  notifyButton: {
    enable: false, // 先禁用默认显示
    // 你的自定义铃铛样式配置...
  }
});

4. 登录/登出时同步更新状态 #

当用户完成登录或登出操作后，手动调用toggleOneSignalBell()，确保状态及时同步：

// 登录成功后触发
function onLoginSuccess(token) {
  localStorage.setItem('authToken', token);
  toggleOneSignalBell();
}

// 登出后触发
function onLogout() {
  localStorage.removeItem('authToken');
  toggleOneSignalBell();
}

框架适配提示（可选） #

如果你用的是Vue/React等前端框架，不需要手动监听hashchange，可以用框架自带的路由工具实现更优雅的检测：

• Vue：使用router.beforeEach全局路由守卫
• React：使用useEffect监听useLocation()的变化

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