如何基于isLoggedIn状态用三元表达式实现内容按需显隐？

一、先拿到登录状态的布尔值isLoggedIn #

核心是根据实际场景生成一个true/false的标识，判断用户是否处于登录状态，常见几种实现方式：

• 从本地存储读取token判断
  前端通常会把登录后的token存在localStorage或sessionStorage里，直接判断是否存在即可（如果要更严谨，可加过期校验）：

  // 简单判断：token存在则视为登录状态
  const isLoggedIn = !!localStorage.getItem('userToken');
  

• 从状态管理工具获取
  如果用了React的Redux、Vue的Pinia/Vuex这类状态管理，直接取全局状态里的登录标识：

  // React + Redux 示例
  const { isLoggedIn } = useSelector(state => state.auth);
  

  <!-- Vue + Pinia 示例 -->
  <script setup>
  import { useAuthStore } from '@/stores/auth';
  const authStore = useAuthStore();
  const isLoggedIn = authStore.isLoggedIn;
  </script>
  

• 从后端接口返回的用户信息判断
  页面初始化时请求用户信息接口，如果返回有效用户数据，说明已登录：

  let isLoggedIn = false;
  // 调用后端接口获取用户信息
  fetch('/api/user/profile')
    .then(res => res.json())
    .then(data => {
      if (data.code === 200 && data.user) {
        isLoggedIn = true;
      }
    })
    .catch(() => {
      isLoggedIn = false;
    });
  

二、用三元表达式控制内容显示 #

拿到isLoggedIn后，直接用三元表达式根据状态切换内容的显示/隐藏：

• React/JSX 场景

  {/* 登录时渲染内容，登出时不渲染 */}
  {isLoggedIn ? (
    <div className="private-content">
      <h3>欢迎回来！</h3>
      <p>仅登录用户可见的专属内容</p>
    </div>
  ) : null}
  

• 原生JS操作DOM

  const privateContent = document.getElementById('private-content');
  // 登录时显示，登出时隐藏
  privateContent.style.display = isLoggedIn ? 'block' : 'none';
  

• Vue 场景

  <!-- 用三元表达式控制文本内容 -->
  <p>{{ isLoggedIn ? '登录后可查看完整内容' : '请登录查看内容' }}</p>
  
  <!-- 或直接控制元素渲染 -->
  <div v-if="isLoggedIn">
    仅登录用户可见的内容区域
  </div>
  

可选：完善token有效性校验（更严谨） #

如果用的是JWT这类带过期时间的token，建议在判断时加上过期校验：

function checkValidLogin() {
  const token = localStorage.getItem('userToken');
  if (!token) return false;
  
  try {
    // 解析JWT的payload部分（前端仅作参考，最终校验需依赖后端接口）
    const payload = JSON.parse(atob(token.split('.')[1]));
    // 对比当前时间和token过期时间（exp是秒级时间戳，转成毫秒对比）
    return payload.exp * 1000 > Date.now();
  } catch (err) {
    // 解析失败，说明token无效，直接清除
    localStorage.removeItem('userToken');
    return false;
  }
}

const isLoggedIn = checkValidLogin();

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