vue中对token的处理！！

这两天突然被问到在vue中，对token的处理，虽然已经做过很多遍，但是有点蒙蒙的感觉。组长问我，token为什么要在vuex中处理了还要持久化到本地呢?

一开始脑子糊涂没有想到，然后组长说，因为vuex刷新，数据会丢失啊。我才突然真正领悟其中的用意！
那如何才能在vue中对token进行合适的处理呢？

• 存token：由于token基本上每个页面又有用到，所以使用vuex来设置token
  

1. 在action中, 发送请求, 获取token (但是action不能直接操作state数据, 需要提交mutation)，所以提交mutation, 将token作为值传递

async login(context, payload) {
   // 1. 发送请求, 获取token
   const res = await reqLogin(payload)
   // 2. 调用mutation, 存入vuex
   context.commit('setToken', res.data)
 }

2. 在mutation中, 存储token进入vuex

// 设置token时, 将数据往本地存储一份
setToken(state, newToken) {
  state.token = newToken
}

3. 利用localStorage或cookie实现持久化

// 设置token时, 将数据往本地存储一份
setToken(state, newToken) {
  state.token = newToken
  setToken(newToken)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
  //可以单独写一个js页面，存放对token的存取删，此处直接调用
  localStorage.setItem('token',token)
}

取/删token：直接在页面调用

 // 移除本地cookie中存储的token
  removeToken()
  
 //获取本地token
  setToken()

好啦，这就是今天要说的对token在vue中的处理啦。下次我会简单和大家聊聊什么是自定义指令！