前端用OAuth2.0登录时，如何安全地处理access_token？

俊美的笔记提问于 2026-02-27 09:21:22 阅读 11

安全

我正在用Vue做第三方登录，后端用的是OAuth2.0授权码模式。现在的问题是，拿到access_token之后，不知道该存在localStorage还是cookie里，听说都有安全风险。而且我试过把token放在请求头里传，但页面刷新就丢了。

下面是我目前在登录回调页里存token的代码：

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const token = route.query.access_token
if (token) {
  localStorage.setItem('access_token', token)
  // 后续axios拦截器会读取这个token加到Authorization头
}
</script>

这样写会不会有XSS或者CSRF的风险？有没有更安全的做法？

OAuth2.0 认证授权

我来解答赞 4 收藏

反馈

1 条解答

打工人宇杰 Lv1

localStorage存token确实有XSS风险，页面一被注入脚本就全没了；cookie的话如果没设HttpOnly也一样怕XSS，设了又没法用JS读取做自动刷新……稳妥做法是：后端返回token时顺便给个短时效的refresh_token，用HttpOnly的cookie存它，access_token还是放内存里（比如Vue的reactive对象），刷新页面就让前端重走一次授权码流程拿新token——这样就算XSS了，攻击者也拿不到长期有效的refresh_token。



// App.vue 或登录成功后的组件里

import { ref } from 'vue'



const accessToken = ref('')

const refreshToken = ref('')



// 登录回调页处理

const handleCallback = () => {

  const token = route.query.access_token

  const refresh = route.query.refresh_token

  if (token) accessToken.value = token

  if (refresh) refreshToken.value = refresh // 或者后端直接把refresh_token写进HttpOnly cookie

}



// 用axios拦截器加token

axios.interceptors.request.use(config => {

  if (accessToken.value) {

    config.headers.Authorization = Bearer ${accessToken.value}

  }

  return config

})

2026-02-27 09:23