アイデンティティトークンtoKen Vuex+localStorage結合ストレージ

前提:ログイン時にバックグラウンドに文字列、すなわちtokenが返されることはよく言われるアイデンティティトークンであり、後続のリクエストではリクエストヘッダにtokenを携帯してこそバックグラウンドデータへのアクセスが許可されるため、tokenをどのように格納するかが特に重要であることが知られています.ToKenをVuexコンテナに直接格納すると、メリット:1.入手が便利である.レスポンスの欠点:ページがリフレッシュされるとデータがなくなります.永続化のためには、Tokenをローカルストレージに保存する必要があります(localStorage–手動でクリアしない限り、永続的に存在します).

持続化

ですので、Vuexとローカルストレージを組み合わせてTokenを格納します.操作Tokenを直接モジュールにカプセル化して、後続の使用を便利にすることができます.

export const getToken = key => {
  const data = window.localStorage.getItem(key)
  console.log(data)
  try {
    return JSON.parse(data)
  } catch (err) {
    return null
  }
}

export const getSetToken = (key, value) => {
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}

export const remove = key => {
  window.localStorage.removeItem(key)
}

その後storeフォルダの下にindex.jsファイルでパッケージメソッドを呼び出す

import Vue from 'vue'
import Vuex from 'vuex'
import { getToken, getSetToken } from '@/utils/token' //           
Vue.use(Vuex)
const key = 'DATA_USER' //  localStorage                   key
export default new Vuex.Store({
  state: {
    user: getToken(key) // state                token     state   ， //        localStorage    token     user   ，        
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      getSetToken(key, user) // localStorage       JSON    ，         ，       
    }
  },
  actions: {},
  modules: {}
})

その後、ログインページでVuexのmutationのメソッドを呼び出し、バックグラウンドから取得したtokenを保存します.

   this.$store.commit('setUser', res.data.data)