OpenID Connect 登录后如何在 Vue 中安全存储 ID Token？

东方云超提问于 2026-03-16 22:00:26 阅读 55

安全

我用 OpenID Connect 接入了公司的统一认证，登录成功后拿到了 ID Token，但不确定该存 localStorage 还是 sessionStorage，听说都有安全风险？

现在我是这样存的，但担心被 XSS 攻击偷走：

<script setup>
import { useAuthStore } from '@/stores/auth'

const handleLoginSuccess = (response) => {
  const { id_token } = response
  // 直接存 localStorage，是不是太危险了？
  localStorage.setItem('id_token', id_token)
  useAuthStore().setToken(id_token)
}
</script>

认证授权

我来解答赞 15 收藏

反馈

2 条解答

___俊凤 Lv1

ID Token确实要谨慎存储。localStorage和sessionStorage都不够安全，特别是面对XSS攻击时。

建议换个思路：把ID Token存在HttpOnly的Cookie里。这样前端JavaScript根本访问不到它，就算有XSS漏洞也拿不走Token。

具体做法是在登录成功后，让服务端设置一个Secure、HttpOnly的Cookie：

fetch('/set-cookie', {

  method: 'POST',

  credentials: 'include',

  body: JSON.stringify({ id_token: response.id_token }),

  headers: { 'Content-Type': 'application/json' }

})

然后在服务端写入Cookie：

// Node.js示例

res.cookie('id_token', id_token, {

  httpOnly: true,

  secure: true, // 仅HTTPS下传输

  sameSite: 'strict'

})

前端需要验证用户身份时，通过服务器端的会话来判断，而不是直接操作ID Token。

这种方案虽然麻烦点，但安全性高多了。开发中确实要多为安全考虑，这比省事重要。

2026-03-26 11:11

a'ゞ蒙蒙 Lv1

ID Token 别存 localStorage，XSS 脚本能直接读取。改成存 sessionStorage，关闭标签页自动失效：

const handleLoginSuccess = (response) => {

  const { id_token } = response

  sessionStorage.setItem('id_token', id_token)

  useAuthStore().setToken(id_token)

}

但 sessionStorage 依然防不住 XSS。真正安全的做法是后端用 HttpOnly Cookie 存 token，前端根本不碰 token，只通过 Cookie 自动认证。

2026-03-17 13:07