如何把token保存到本地

1.什么是token

        当我们登录时填写账号和密码点击登录的时候，会向服务器发送一个认证，如果认证成功服务器会返回一个token值，这个token值是就相当于身份证一样，如果再次向服务器请求时，由于已经带上了身份证，这样就可以免去再次输入账号和密码的麻烦，因为token是由服务器发送回来的，服务器可以辨别这个token是否是自己发放的

2.为什么要使用token

        使用token是因为可以减少服务器的压力，因为没有token的话，每次发送请求服务器都会进行认证，增加服务器压力

3.把token保存到本地

为了方便操作，先封装localstorage存储模块

// 封装localstorage对token(对象)的三个操作
// 1. 保存  // 2. 获取  // 3. 删除
// JSON


const TOKEN_NAME = 'my-token'
// 1. 保存
export const saveToken = (tokenObj) => {
  localStorage.setItem(TOKEN_NAME, JSON.stringify(tokenObj))  
}

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

// 3. 删除
export const delToken = () => {
  localStorage.removeItem(TOKEN_NAME)
}

将获取到的token字符串先保存到公共数据state中再保存到到localstorage中 

import Vue from 'vue'
import Vuex from 'vuex'
import { setToken } from '../utils/storage.js'
Vue.use(Vuex)
export default new Vuex.Store({
  // 保存公共数据
  state: {
    tokenInfo: {}
  },
  // state中的数据要通过mutations才能修改
  mutations: {
    // mutation就是一个一个的函数, 第一个参数是当前的state, 第二个是载荷：要传入的数据
    mSetTokenInfo (state, newTokenInfo) {
      state.tokenInfo = newTokenInfo

      // 保存到本地localstorage
      setTokenObj(newTokenInfo)
    }
  },

每次操作页面刷新时，从 localstorage中获取token

//getTokenObj() || {} : 如果getTokenObj的返回值是null，则initTokenObj是一个空对象
export default new Vuex.Store({
  // 保存公共数据
  state: {
    tokenInfo: getToken() || {}
  },
})