vuex + localStorage 实现 token持久化

Posted 2021-07-11 奥特曼　

一、 通过vuex 和 localStorage 进行配合实现 token持久化

1. 我们知道 用 vuex保存token是为了每个组件都可以访问， 但vuex有一个缺点 就是刷新页面vuex中的数据会清空，这要导致只要用户一登录 并且刷新 保存的token就会消失，为了解决这个问题 我们要把token存在localStorage。

2. 为什么不存在sessionStorage里 个人觉得 sessionStorage虽然可以存储 但是它的生命周期不长，只要关闭页面后 sessionStorage里的数据会自动清空，而localStorage的数据只要不手动删除永远不会消失！！

如何vuex保存token？  跳转链接

二、封装一个保存、获取、删除token  .js文件

const myToken = 'my_token'

// 设置token
export const setToken = (newToken) => {
  localStorage.setItem(myToken, JSON.stringify(newToken))
}

// 获取token
export const getToken = () => {
  return JSON.parse(localStorage.getItem(myToken))
}

// 删除token   
export const remToken = () => {
  localStorage.removeItem(myToken)
}

// 清除所有localStorage的方法是 clear

上面有个注意点哦 如果保存的时候没有转换JSON对象 会将对象转换成字符串类型哦！！

三、保存token到localStorage

注意哈 这里是案例  按自己功能需要写到哪里

// 按需引入 设置token  保存token
import { setToken, getToken } from '../untils/localStorage'
// 保存在vuex 中  只截取了一部分代码 完整vuex在上面链接
 state: {
    // 获取token  如果getToken没有token值 转换为空对象   短路运算
    tokenInfo: getToken() || {}
  },
  // 修改state里的tokenInfo
  mutations: {
    setTokenInfo (state, newSetToken) {
      state.tokenInfo = newSetToken
      // 保存到localstorage
      setToken(newSetToken)
  }

四、魔法字符串

const myToken = 'my_token'

封装的时候我们发现 字符串赋值给了变量 

魔法字符串: 指的是, 在代码之中多次出现, 与代码形成强耦合的某一个具体的字符串或数值. 风格良好的代码, 应该尽量消除魔法字符串, 而由含义清晰的变量代替.

(ES6 -- 阮一峰)