页面刷新时的Vuex状态

Question

我的应用使用Firebase API进行用户身份验证,将登录状态保存为Vuex状态中的布尔值.

当用户登录时,我设置登录状态并相应地有条件地显示登录/登出按钮.

但是当刷新页面时,vue应用程序的状态将丢失并重置为默认值

这会导致问题,即使用户登录并刷新页面时,登录状态也会设置为false,并且即使用户保持登录状态,也会显示登录按钮而不是注销按钮....

我该怎么做才能防止这种行为

我可以使用cookies 或任何其他更好的解决方案可用...

-

Answer 1

创建 VueX 状态时，使用vuex-persistedstate插件将其保存到会话存储中。这样，当浏览器关闭时，信息就会丢失。避免使用 cookie，因为这些值将在客户端和服务器之间传输。

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
    })],
    state: {
        //....
    }
});

使用sessionStorage.clear();时，用户手动注销。

Answer 2

这是一个已知的用例.有不同的解决方案.

例如,人们可以使用vuex-persistedstate.这是一个用于vuex在页面刷新之间处理和存储状态的插件.

示例代码:

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

我们在这里做的很简单:

1. 你需要安装 js-cookie
2. 在getState我们尝试加载保存状态Cookies
3. 在setState我们保存我们的状态Cookies

文档和安装说明:https://www.npmjs.com/package/vuex-persistedstate

Answer 3

Vuex 状态保存在内存中。页面加载将清除此当前状态。这就是状态在重新加载时不会持续的原因。

但是vuex-persistedstate插件解决了这个问题

npm install --save vuex-persistedstate

现在将其导入商店。

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    account,
  },
  plugins: [createPersistedState()]
});

它与一行代码完美配合： plugins: [createPersistedState()]

Answer 4

穿上状态：

producer: JSON.parse(localStorage.getItem('producer') || "{}")

进行突变：

localStorage.setItem("producer",JSON.stringify(state.producer)) // OR
localStorage.removeItem("producers");

对我来说很好用！

Answer 5

我认为使用cookies/localStorage来保存登录状态可能会在某些情况下导致一些错误.
Firebase已经为localStorage记录了登录信息,包括expirationTime和refreshToken.
因此我将使用Vue创建的hook和Firebase api来检查登录状态.
如果令牌已过期,api将为我们刷新令牌.
因此,我们可以确保在我们的应用中显示的登录状态等于Firebase.

new Vue({
    el: '#app',
    created() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                log('User is logined');
                // update data or vuex state
            } else {
                log('User is not logged in.');
            }
        });
    },
});