持久化保存vuex数据-解决页面刷新后丢失vuex数据的问题
程序员文章站
2022-07-13 22:46:40
...
解决思路:
- 在使用vuex存储数据时,同时使用cookie或者localstorage存储
- 每次进入路由判断vuex数据是否为空
- 如果为空则重新commit数据(数据从cookie或者localstorage获取)
src目录下建立permission.js
,引入main.js
import router from './router'
import store from './store'
import Cookies from 'js-cookie'
const whiteList = ['/login', '/register'] // 路由白名单
router.beforeEach((to, form, next) => {
const userInfo = Cookies.get('userInfo') // cookies获取用户信息
if (userInfo) { // 用户信息存在
if (to.path === '/login') { // 判断是否访问的login
next({path: '/'}) // 已登录状态不允许访问login,返回后台首页
} else {
const user = store.state.userInfo // 从vuex获取用户信息
if (Object.keys(user).length === 0) { // 用户信息为空
store.commit('saveUserInfo', JSON.parse(userInfo)) // 将cookies的用户信息传给vuex的state
next()
} else {
next()
}
}
} else { // 用户信息不存在
if (whiteList.indexOf(to.path) !== -1) { // 用户信息不存在,访问的为白名单路由
next()
} else {
next(`/login?redirect=${to.path}`) // 访问的路由为非白名单路由,跳转login
}
}
})
mutation中的saveUserInfo
函数:
saveUserInfo(state, userInfo) {
state.userInfo = userInfo
}
扩展
- cookies和localstore一样不能存储对象,可以使用
JSON.stringfy
转为字符串存储,通过JSON.parse
获取对象 - 判断对象是否为空
let obj = {}
Object.keys(obj).length === 0 // true
- 使用页面加载进度条
npm i nprogress
在permission.js
中引入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach里加入NProgress.start()
router.afterEach里加入NProgress.done()
上一篇: Redis持久化-数据丢失及解决方案总结
下一篇: Redis开启AOF持久化数据丢失问题
推荐阅读
-
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
-
vuex结合session存储数据解决页面刷新数据丢失问题
-
详解vuex持久化插件解决浏览器刷新数据消失问题
-
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
-
持久化保存vuex数据-解决页面刷新后丢失vuex数据的问题
-
刷新后vuex数据丢失解决方案- vuex-persistedstate持久化插件
-
vue开发--vue页面刷新state丢失,vuex数据持久化plugins
-
vuex页面刷新后数据丢失的方法
-
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
-
vue页面应用在F5刷新网页后vuex的state数据丢失?