Vue项目接入SSO后如何正确跳转并获取用户信息？

端木路喧提问于 2026-03-08 15:42:25 阅读 2

安全

我们公司最近在搞统一认证，前端用 Vue 接入了公司的 SSO 系统。登录成功后会重定向回我的应用，URL 带了个 token 参数，但我发现有时候拿不到用户信息，或者页面刷新后状态就丢了。我现在的做法是在 App.vue 里一进来就解析 URL 的 token 并调接口，但感觉不太稳。

比如这段代码：

<script setup>
import { onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

onMounted(() => {
  const urlParams = new URLSearchParams(window.location.search)
  const token = urlParams.get('sso_token')
  if (token) {
    localStorage.setItem('auth_token', token)
    window.history.replaceState(null, '', window.location.pathname) // 清掉 URL 参数
    useUserStore().fetchUserInfo() // 调接口拿用户数据
  }
})
</script>

但有时候用户直接刷新页面，URL 里没 token 了，store 也空了，就得重新跳去 SSO 登录页。有没有更靠谱的流程？是不是该用 OAuth2 的隐式模式或者 PKCE？

我来解答赞 1 收藏

反馈

1 条解答

上官司翰 Lv1

啊这问题我遇到过...熬夜改到凌晨三点才搞定。你这流程确实不太稳，应该这样：

1. 在路由守卫里检查token，没有就跳SSO登录
2. 拿到token后存localStorage+store双保险
3. 每次请求header带上token

试试这个路由守卫代码：

router.beforeEach(async (to) => {

  const userStore = useUserStore()

  if (!userStore.token) {

    const token = localStorage.getItem('auth_token') || new URLSearchParams(window.location.search).get('sso_token')

    if (token) {

      userStore.setToken(token)

      await userStore.fetchUserInfo()

    } else {

      window.location.href = '你的SSO登录地址'

    }

  }

})

对了，记得axios拦截器也要配token，不然刷新后请求会挂。

2026-03-08 16:12