[JavaScript知识库]vue中token的处理

传统的token处理

? ? ? ? 直接存储到localstorage或者sessionStorage中，缺点：

????????1 数据并非响应式，需要进行特殊处理

? ? ? ? 2 存取麻烦，在存储对象数组类型的时候要用JSON转换为JSON类型的字符串

VUEX的存储方法

? ? ? ? 通过mutations定义的函数将数据存储到Vuex的state中

? ? ? ? 缺点： 数据存储的有效时间短，刷新页面数据消失

项目中的token处理方法

? ? ? ? 两者结合，加上封装本地存储模块

本地存储模块：

// 封装本地存储模块

// 存储数据
export const setItem = (key, val) => {
  // 对象或数组要进行转换
  if (typeof val === 'object') {
    val = JSON.stringify(val)
  }
  localStorage.setItem(key, val)
}

// 获得数据
export const getItem = (key) => {
  const data = localStorage.getItem(key)
  // 处理localStorage内的数据
  // 不需要async
  try {
    return JSON.parse(data)
  } catch {
    return data
  }
}

// 删除数据
export const removeItem = (key) => {
  localStorage.removeItem(key)
}

导出了存储数据，获取数据，和删除数据的函数，数据的转换在这里进行

?Vuex

import Vue from 'vue'
import Vuex from 'vuex'
// 导入本地存储的模块
import { setItem, getItem } from '@/assets/utils/storeage'

Vue.use(Vuex)

const tokenKey = 'user'

export default new Vuex.Store({
  state: {
    // 一个对象用于存储当前登录用户信息里面包含token等数据
    user: getItem(tokenKey)
  },
  mutations: {
    saveToken(state, data) {
      state.user = data
      // 为了防止刷新丢失需要把数据备份到本地存储
      setItem(tokenKey, state.user)
    }
  },
  actions: {},
  modules: {}
})

????????实现了本地数据存储只是用来延长token存在的时间其他的一切操作都是用vuex内的state.user内的数据来进行?

?