通过 Vue 3 中的反应式全局存储共享身份验证状态是否安全?

Is it safe to share authentication state via reactive global store in Vue 3?

我正在使用 vue 3 构建一个 CMS,我想知道使用全局存储 store.store.auth = false/true 是否是一种安全的呈现 in/out 组件的方式,这些组件应该只有经过身份验证的用户。它是这样的:

  1. 用户在登录表单中输入凭据
  2. 凭据通过 HTTP 请求发送到后端并由 laravel sanctum
  3. 检查
  4. 响应到达设置 store.store.auth = true
  5. 的前端
  6. 只有经过身份验证的用户才能看到的组件和路由通过 v-if
  7. 呈现

这是一种安全的方法还是可以改进?

在这种情况下,安全性几乎 完全取决于后端。

Sanctum does not use tokens of any kind. Instead, Sanctum uses Laravel's built-in cookie based session authentication services. Typically, Sanctum utilizes Laravel's web authentication guard to accomplish this. This provides the benefits of CSRF protection, session authentication, as well as protects against leakage of the authentication credentials via XSS.

src

似乎 sanctum 处理身份验证,所以你应该没问题,只要 store.store.auth 值保持最新,并且 API 进行自己的身份验证和授权。

因为通过 js 源代码可以看到整个应用程序,所以有人可能会修改他们不应该看到的状态和显示选项。这在 SPA 中很难 really-really 预防,这就是为什么后端正确处理它是最重要的。 您可以使用代码拆分来防止加载需要身份验证的应用程序部分,但这不是安全措施。