持久化保存vuex数据-解决页面刷新后丢失vuex数据的问题

解决思路：

1. 在使用vuex存储数据时，同时使用cookie或者localstorage存储
2. 每次进入路由判断vuex数据是否为空
3. 如果为空则重新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
}

扩展

1. cookies和localstore一样不能存储对象，可以使用JSON.stringfy转为字符串存储，通过JSON.parse获取对象
2. 判断对象是否为空

let obj = {}
Object.keys(obj).length === 0 // true

3. 使用页面加载进度条
   npm i nprogress
   在permission.js中引入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach里加入NProgress.start()
router.afterEach里加入NProgress.done()