设置“isAuthenticated”是不好的做法吗？本地存储中的标志？

Question

这更多是一般性的前端问题，但就上下文而言，我使用的是 Vue 3 和 vue-router。

我正在构建使用 Vue 3 进行身份验证的功能。因为我没有使用 Vuex，所以我找不到从实例化路由器的文件中访问状态的方法。所以我想也许我应该将一个名为 isAuthenticated 的标志粘贴到 LocalStorage 中。

当用户登录时，isAuthenticated 被设置为 true，然后路由器从中读取以验证后续重定向。这与在 LocalStorage 中存储令牌非常不同 – 我将令牌存储在 httpOnly cookie 中。

对于那些了解 Vue3/Vue-router 的人来说，它看起来像这样：

  Router.beforeEach(async (to, from) => {

    // localStorage.isAuthenticated = false

    const isAuthenticated = localStorage.isAuthenticated;

    if (
      // make sure the user is authenticated
      isAuthenticated !== 'true' &&
      to.meta.requiresAuth &&
      // Avoid an infinite redirect
      to.path !== '/login'
    ) {
      // redirect the user to the login page
      return '/login'
    }
  })

如果有人破解了这个并将标志更改为 true，那也没什么大不了的；我的后端将拒绝任何没有正确 JWT 令牌的 API 调用。

但这是不好的做法吗？感觉有点脆弱，我希望编写一个强大且安全的应用程序。