使用 laravel sanctum 在 vue 中保存令牌的最佳方法

Posted 2023-02-22

【中文标题】使用 laravel sanctum 在 vue 中保存令牌的最佳方法

【英文标题】：Best approach to save token in vue with laravel sanctum

【发布时间】：2021-07-02 18:35:58

【问题描述】：

我正在开发用 laravel 和 vuejs 开发的应用程序。现在我正在尝试使用 laravel sanctum 进行登录/注销部分。

现在我有以下场景：

后台已经有了登录/注销/注册的方法，但是vue部分怎么处理呢？

所以基于令牌，我可以在后端发出任何请求，但是如何将令牌保存在前端？

在整个互联网上，我看到了 localstorage（但它是否安全？）或 vuex（它也保存在 localstorage 中）

处理存储令牌的最佳方法是什么？

谢谢！

【参考方案1】：

我一般是用Vuex来存储token，然后我把axios.defaults.headers.common['Authorization'] = `Bearer $store.getters.token`;放在main.js里面，然后token总是和axios请求一起发送

【参考方案2】：

在不知道您确切的服务器端解决方案或您的客户端需求的情况下，很难回答。

以下是一些进一步研究的链接：

Vuex 默认不会存储在localstorage 中，也不会持久化页面重新加载。

本地存储将持续存在，因此可能是一个安全问题。

Sessionstorage 将保持页面重新加载，但不会在浏览器重新启动后。

本地存储中的刷新令牌和会话存储中的访问令牌的组合可能是一个很好的解决方案。

HttpOnly 也是一个可行的解决方案，因为您可以访问后端