SSO登录后前端如何安全获取并存储用户信息？

A. 喜静提问于 2026-03-14 18:48:25 阅读 41

安全

我们接入了公司统一的SSO系统，登录成功后会跳转回前端页面并带上code参数。现在的问题是：我该在前端怎么拿这个code换用户信息？直接用axios发请求到后端接口可以吗？而且拿到用户信息后存localStorage会不会有安全风险？

目前我在入口页面这样处理跳转后的URL：

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  if (code) {
    // 清除url中的code，避免刷新重复使用
    window.history.replaceState({}, document.title, window.location.pathname);
    // 调用后端接口换取用户信息
    fetch('/api/auth/sso?code=' + code)
      .then(res => res.json())
      .then(user => localStorage.setItem('user', JSON.stringify(user)));
  }
</script>

但总觉得这样不太对，好像把敏感逻辑放前端了，求指点正确做法。

SSO单点登录认证授权

我来解答赞 5 收藏

反馈

2 条解答

Prog.增芳 Lv1

你的思路基本是对的，code换用户信息这事儿放前端完全没问题。SSO的code本来就是设计为可暴露的临时凭证，有时效性且只能用一次，截获了也翻不起多大浪。

不过有个关键点：后端返回的应该是token或者session标识，而不是直接把用户信息丢给你存localStorage。正确的流程是这样的：

前端用code调后端接口，后端拿着code去SSO服务器换到真正的登录凭证（可能是access_token或者直接拿到用户信息），然后后端生成自己的session token返回给前端。你存到localStorage的是这个token，而不是原始的用户信息。后续前端发请求的时候带上这个token，后端解析token来识别用户。

为什么这么搞呢？因为用户信息本身可能会变，但token是动态的。后端可以通过token来控制登录状态、强制登出、刷新token什么的。如果你直接把用户信息存localStorage，后端就没法管理这个登录状态了。

至于localStorage的安全风险，确实存在XSS被偷的风险，但这是前端存储的常态做法了。你要更安全就用sessionStorage，关闭浏览器标签页后自动失效，看产品需求。真正敏感的操作（比如修改密码、支付）别信任前端存的信息，每次都从后端接口实时获取校验。

你现在的代码改一改就行：

后端接口那边记得用code换到用户信息后，生成自己的session token再返回。

2026-03-18 19:01

梓淇 Lv1

你的做法基本是对的，核心流程没问题。

SSO的标准流程就是前端拿code → 发给后端 → 后端去换token和用户信息 → 返回给前端。你那段代码里，前端只是把code传过去，实际换token的逻辑是在后端完成的，所以不存在把敏感逻辑放前端的问题。

但有几个点要注意一下：

后端那边一定要保证code只能使用一次，用完就失效，不然有重放攻击风险。另外后端返回给前端的用户信息应该是脱敏后的，比如只需要用户ID、昵称、头像这些，别把token啊、敏感字段啊返回来。

关于localStorage存用户信息，确实有XSS风险，但如果你们没有XSS漏洞那就没问题。这是前端存用户状态的常见做法，比存cookie更安全一点（cookie有CSRF问题）。如果想更安全，可以考虑：

用sessionStorage代替localStorage，关闭浏览器就清掉
或者存一个加密后的用户信息，后端返回时做个简单加密
关键是把token存httpOnly的cookie里，别存localStorage，前端只存用户基本信息

你现在的实现没大问题，把心放肚子里。唯一建议优化的是fetch请求可以加个错误处理万一后端换用户信息失败了不至于静默失败。

2026-03-17 00:02