Vue单页应用(SPA)中如何安全存储私密内容？

这确实是SPA的核心特性——所有前端代码（包括你写在组件里的静态内容）都会被打包到客户端可获取的JS/CSS文件中，不管路由权限怎么控制，只要资源加载到浏览器，就能被查看到。路由守卫只是限制了页面渲染，没法阻止资源被下载和解析。

• 后端动态获取私密内容：把私密内容存在后端数据库或配置里，用户登录后，通过带身份验证的API接口（比如请求头带JWT Token）获取内容，前端拿到后再渲染。这样内容不会出现在打包后的静态文件里，只有登录用户能通过合法请求拿到。
  示例代码（Vue组件）：

  <template>
    <div>{{ secretContent }}</div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import axios from 'axios'
  
  const secretContent = ref('')
  
  onMounted(async () => {
    // 请求时携带登录后的身份凭证
    const res = await axios.get('/api/get-secret-content', {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
    })
    secretContent.value = res.data.content
  })
  </script>
  

• 后端渲染敏感页面（SSR/SSG+权限校验）：如果是Vue项目，可以用Nuxt.js这类支持SSR的框架，敏感页面在服务器端渲染，只有登录用户的请求才会返回包含私密内容的HTML，未登录用户直接返回403或跳转登录页，从根源避免内容出现在前端打包文件中。
• 加密敏感内容（兜底方案）：如果必须在前端存部分低敏感度内容，可以对内容进行加密，登录后用后端返回的密钥解密。但这种方式只是增加了查看难度，不是绝对安全，因为解密逻辑和密钥仍可能被逆向破解，仅适合非核心私密内容。

前端路由权限（比如Vue Router的beforeEach守卫）只是UI层面的拦截，无法阻止用户直接访问打包后的静态资源，所以任何需要严格保密的内容都不能直接硬编码在前端代码里，必须通过后端做权限校验和动态分发。

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