【vue】一，token是什么？如何使token持久化？

token是什么？

解释：通过一定的规则生成包含用户信息的字符串

token的作用

1. 防止表单重复提交

• 后端编写一个生成token的工具类
• 前端在打开表单时向后端申请一个随机token，并存入session中
• 前端通过session获取token，并将该token放入表单隐藏域中，随表单一起提交
• 后端获取前端提交过来的token和原token比较，相同则删除该token并提交成功

2. 作身份验证​

为什么要持久化？

例如token、用户名和用户其他信息，当后端接口响应回来数据的时候，因为组件的封装，我们一般会将这些数据存放到vuex这个公共的数据存放区域，但是vuex存放的数据有一个问题，那就是一刷新数据就会消失。
所以，需要给这部分数据做一个数据持久化，通过cookie或者localstorage将数据保存至本地。第一次调用后端接口获取数据的同时将数据存放到本地，以后使用的时候再从本地拿出来使用，这样就解决了vuex刷新后数据就没了的问题。

在vue中怎么使token持久化？

1.存储在cookie中
2.存储在本地中

主要介绍token怎么存储在cookie中，用户登录为例

• 编写一个工具类auth.js来控制token

import Cookies from 'js-cookie'

//赋初始值   ES6特性
const TokenKey = 'Admin-Token'

//从cookie中获取token
export function getToken() {
  return Cookies.get(TokenKey)
}
//将token存入cookie中
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
//删除token
export function removeToken() {
  return Cookies.remove(TokenKey)
}

• 通过调用用户登入的接口从后端返回token并存入cookie中

login(username, userInfo.password).then(response => {
          //获取从后端传来的数据
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }