我的应用程序使用 Firebase API 进行用户身份验证，将登录状态保存为 Vuex 状态中的布尔值。
当用户登录时，我设置登录状态并相应地有条件地显示登录/注销按钮。
但是当页面刷新时，vue app的状态丢失并重置为默认
这会导致一个问题，因为即使用户登录并刷新页面，登录状态也会设置回false并且即使用户保持登录状态，也会显示登录按钮而不是注销按钮......
我该怎么做才能防止这种行为
我应该使用cookie 还是有其他更好的解决方案...
-
——
页面刷新时的 Vuex 状态
IT技术
javascript
vue.js
vuejs2
state
vuex
2021-01-19 11:22:16
6个回答
这是一个已知的用例。有不同的解决方案。
例如，可以使用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 })
})
]
})
我们在这里做的很简单：
- 你需要安装
js-cookie - 在
getState我们尝试加载从保存的状态Cookies - 在
setState我们将我们的状态保存到Cookies
创建 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();时，用户手动注销。
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()]
我认为使用 cookies/localStorage 来保存登录状态在某些情况下可能会导致一些错误。
Firebase 已经在 localStorage 为我们记录了登录信息，包括 expireTime 和 refreshToken。
因此我将使用 Vue 创建的钩子和 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.');
}
});
},
});
穿上状态：
producer: JSON.parse(localStorage.getItem('producer') || "{}")
进行突变：
localStorage.setItem("producer",JSON.stringify(state.producer)) // OR
localStorage.removeItem("producers");
对我来说很好用！