持久化处理token

持久化处理token

• 为什么我们要做持久化？
  vuex基于内存管理的工具，内存每次刷新浏览器都会进行初始化 token丢失问题

如果想要使用vuex管理数据的便捷，而且又想刷新时还不丢失 localStorage和cookie持久化缓存

• 如何实现持久化呢？
  这里小编使用的是vuex和cookie
  专门给cookie封装了函数

// 专门用来操作cookie的方法包
// 内部封装繁琐的操作 参数处理 暴露函数
import Cookies from 'js-cookie'
// 定义一个变量
const TokenKey = 'token'
// 获取token方法
export function getToken() {
  return Cookies.get(TokenKey)
}
// 设置token方法
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

我们是去vuex里设置token的，因为很多地方都会用到token，并且分了模块

• 获取到token
• 一式两份，在vuex存入一份，本地存入一份（ localStorage和cookie）
• 初始化的优先从本地取一下，取到就以渠道的为主
• 取不到就按照格式初始化为空串、空对象

import { setToken, getToken } from '@/utils/auth'
export default {
  namespaced: true,
  // vuex中的模块也是可能进行复用的  为了复用的时候 互不影响 采用同样的函数执行 return对象的形式
  state: () => ({
    token: getToken() || '',
  }),
   mutations: {
    setToken(state, token) {
      // 存入vuex
      state.token = token
      // 存入本地
      setToken(token)// cookie
    }
  },
  actions: {
    asyncSetToken(ctx, token) {
      // 发送请求登录 获取token
     return new Promise((resolve, reject) => {
     //用了Promise对象，主要是为了防止还没获取token值就登录跳转了
        login(data).then(res => {
          // console.log(res)
          ctx.commit('setToken', res.data)//token值
          resolve()
        })
      })
    }
  }
  }

在合适位置使用actions函数，发送请求，获得token值即可。