Vuex数据持久化---token(个人理解)

想要弄明白这个命题，首先要了解token是什么。

一.Token

顾名思义嘛，令牌，可以理解为一种身份验证标识。

举个例子，你去游乐园玩，进去得要门票吧，不然门口的保安大哥怎么都不会让你进去，token就像是一张（年卡门票）。

那问题来了，全国那么多游乐园，我不可能拿着一家的票逛全国的游乐园吧。所以每家游乐园发的门票都是独一无二的。

这里的游乐园其实就是各个网站，你在网站登录后，服务器就会结合你的用户信息，发一个你的专属token。

二.Token的存储问题

我们一般会把从服务器请求来的数据存储到Vuex中。因为Vuex容器中的数据，可以在各个项目组件中直接拿出来用，更加方便代码的编写。

但是！！！

这里就引出了一个问题，比如用户完成了登录，这时他非常开心的刷新一下页面。

Vuex容器中的数据将会丢失状态，也就是刚从服务器获取的Token它就没了。

也就是说服务器辨识不了用户的身份，他又得重新登陆一遍，再获取一遍token。

如果不解决这个问题，那明天可能你就被经理炒了。

 三.Token储存问题的解决方案

（1）问题的关键点就在于：让token在刷新或关闭页面之后不丢失

  我们可以在登陆成功后Vuex获取token的同时，在本地也保存一份token。

  我的做法就是封装一套本地存储token的方法，代码如下：

 图中用到的js-cookie是一个简单的，轻量级的处理cookies的js API。

具体用法可以查询官方文档。

（2）那么下面就要处理在Vuex中token的存储了

import { setToken, removeToken, getToken } from '@/utils/auth'
import { login } from '@/api/user'
export default {
  namespaced: true,
  state: {
    token: getToken() || null
  },
  mutations: {
    setToken(state, newToken) {
      state.token = newToken
      setToken(newToken)
    },
    // 删除token
    removeToken(state) {
      state.token = null // 删除vuex的token
      removeToken()
    }
  },
  actions: {
    async userlogin(context, data) {
      const res = await login(data)
      console.log(data)
      //   console.log(res)
      context.commit('setToken', res.data)
    }
  }
}

代码中的处理主要遵循三个思路：

1. 在对token进行初始化的时候先从本地取一下，优先使用本地取到的值

2. 在设置token的时候除了在vuex中存一份，在本地也同步存一份

3. 在删除token的时候除了把vuex中的删除掉，把本地的也一并删除

各位看官老爷，记得三连呀！