页面刷新时的烦恼状态

我的应用程序使用 FirebaseAPI 进行用户身份验证，将登录状态保存为 Vuex 状态下的布尔值。

当用户登录时，我设置 登入状态并有条件地显示相应的 Login/Logout 按钮。

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

这导致了一个问题，即使当用户登录和页面被刷新时，登入状态被设置回 假的并且显示登录按钮而不是注销按钮，即使用户保持登录..。

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

我应该使用 < strong > cookie 吗 或者其他更好的解决办法。

    -
153611 次浏览
小开
最佳答案

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

例如，一个人可以使用 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

小开

我已经解决了这个问题，通过重新设置我的头每次我重新加载也获取用户数据，我不知道什么是更好的..。

new Vue({
el: 'vue',
render: h => h(VueBox),
router,
store,


computed: {
tokenJWT () {
return this.$store.getters.tokenCheck
},
},




created() {
this.setAuth()


},


methods:
Object.assign({}, mapActions(['setUser']), {


setAuth(){
if (this.tokenJWT) {
if (this.tokenJWT === 'expired') {
this.$store.dispatch('destroyAuth')
this.$store.dispatch('openModal')
this.$store.dispatch('setElModal', 'form-login')


} else {
window.axios.defaults.headers.common = {
'Accept': 'application/json',
'Authorization': 'Bearer ' + this.tokenJWT
}
axios.get( api.domain + api.authApi )
.then(res => {
if (res.status == 200) {
this.setUser( res.data.user )
}
})
.catch( errors => {
console.log(errors)
this.destroyAuth()
})
}
}
}
})


})
小开

我认为使用 cookies/localStorage 保存登录状态在某些情况下可能会导致一些错误。
Firebase 已经为我们记录了 localStorage 上的登录信息，包括:。
因此，我将使用 Vue 创建的 hook 和 Firebaseapi 来检查登录状态。
如果令牌过期，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");

对我来说没问题！

小开

创建 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-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()]，它就可以完美地工作

小开

在这种情况下，最简单的方法是安装 Npm install ——保存 vuex-persistedstate
然后，将其导入到您的烦恼文件中 从“ vuex-persistedstate”中导入 createPersistedState; 然后，将其放到 createStore 中，如下所示:

plugins: [createPersistedState()],
state(){
return{
isActive: false,
}
}
小开

这里介绍如何使用组合 api。

Npm install ——保存 vuex-persistedstate

import createPersistedState from "vuex-persistedstate";
import { createStore } from "vuex";


export default createStore({
state: {
project_id: 1,
},
mutations: {
setProjectId(state, payload) {
state.project_id = payload;
},
},
getters: {},
actions: {},
plugins: [createPersistedState()],
});

提交答案