VUEX数据持久化-----token数据保存问题

Vuex 容器中的数据只是为了方便在其他任何地方能方便的获取登录状态数据，但是页面刷新还是会丢失数据状态，所以我们还要把数据进行持久化中以防止页面刷新丢失状态的问题。

基本的思路是：

• 用户登陆成功之后，保存token到本地存储localstorage
• 在vuex容器初始化时，使用本地存储中的值

根目录下各文件作用

一、封装存储模块

// 封装模块 使用localStorage实现持久化 只是进行保存
// 从localStorage中取出一项数据 名字叫name
export const getItem = name => {
  return JSON.parse(localStorage.getItem(name))
}
// 向localStorage中设置一项数据 名字为name里面设置值为obj
export const setItem = (name, obj) => {
  localStorage.setItem(name, JSON.stringify(obj))
}
// 删除
export const removeitem = name => {
  localStorage.removeItem(name)
}

二、把token保存在vuex

import Vue from 'vue'
import Vuex from 'vuex'
import { setItem, getItem } from '@/utils/storage.js'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 保存公共数据 在设置vuex中的初值时，先从本地存储中取，如果取不到，则初始为空
    tokenInfo: getItem('tokenInfo') || {}
  },
  mutations: {
    mSetTokenInfo (state, tokenObj) {
      state.tokenInfo = tokenObj
      // 因为刷新会丢失所以进行持久化 调用storage文件里方法
      setItem('tokenInfo', tokenObj)
    }
  },
  actions: {
  },
  modules: {
  }
})

三、登录页面登录成功之后保存token

// 保存token
        this.$store.commit('mSetTokenInfo', 填写请求返回值中找到token所在的地方)

四、封装 axios 配置请求拦截器，在请求头补充token

/* 对axios进行二次封装
请求拦截器增加token
响应拦截器处理大数据
*/
import store from '@/store/index.js'
import axios from 'axios'
/*
自定义写法：const xxx = axios.create({})
一个项目中可能有不同的基地址 就要用自定义写法设置不同的基地址
*/
const instance = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn'
})
// 在instance上添加请求拦截器 补充请求头token信息
instance.interceptors.request.use(function (config) {
  // 从vuex中取出token
  const token = store.state.tokenInfo.token
  // 如果有token则 添加到headers中
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

export default instance

小结