在vuex状态下保存用户认证状态是安全的解决办法？

Question

我看过各种关于 spa vue 身份验证的视频。所有这些视频都提供了基于 vuex 的解决方案

像这样; 他们在诸如 loggedIn 之类的 getter 中创建了返回用户身份验证状态的函数。

store.js

[...]

state:{
    token: null,
    user: null
},
getters: {
    loggedIn: (state) => {
        return state.token && state.user ? true : false
    },
},

[...]

Dashboard.vue（这是受保护的路由）

[...]

beforeRouteEnter (to, from, next) {
    if(store.getters.loggedIn)
        next()
    else
        next({ name:'login' })

}

[...]

一切正常，但我可以通过 vue 开发工具手动更改状态，因此我可以输入受保护的路由，因此身份验证无法正常工作。

我的问题：

1. 生产模式下用户可以修改vuex状态吗？
2. 在vuex状态下保存用户认证状态是安全的解决办法吗？

Answer 1

用户可以在生产模式下修改vuex状态吗？

是的，用户可以对应用的状态进行任何操作。您可以混淆某些内容，但不能阻止用户检查或修改您应用的数据。

在vuex状态下保存用户认证状态是安全的解决办法吗？

这是一种方法，我确实推荐它，尤其是随着应用程序大小的增长，管理应用程序中的共享状态会变得更容易。但我不会说它是“安全的”或“不安全的”。

我可以通过 vue 开发工具手动更改状态，因此我可以进入受保护的路由，因此身份验证无法正常工作。

如您所描述的，该应用的行为很容易被规避。您只能完全控制服务器代码。如果由于用户使用开发工具篡改了数据，受保护路由在客户端上变得可访问，则服务器应拒绝受保护路由所需的任何对特权数据的请求。