//設(shè)置token
export function setToken(token) {
    // token 代表要存儲到本得的值
	return sessionStorage.setItem("儲存到本地的名字", token)
}
//獲取token
export function getToken() {
	return sessionStorage.getItem("儲存到本地的名字")
}
//清除token
export function removeToken() {
	return sessionStorage.removeItem("要清除的名字")
}

在min.js全局引入

import {
	getToken,
	setToken,
	removeToken
} from '@/utils/auth'

vue中token的處理

傳統(tǒng)的token處理

直接存儲到localstorage或者sessionStorage中，缺點(diǎn)：

1 數(shù)據(jù)并非響應(yīng)式，需要進(jìn)行特殊處理

2 存取麻煩，在存儲對象數(shù)組類型的時(shí)候要用JSON轉(zhuǎn)換為JSON類型的字符串

VUEX的存儲方法

通過mutations定義的函數(shù)將數(shù)據(jù)存儲到Vuex的state中

缺點(diǎn)：數(shù)據(jù)存儲的有效時(shí)間短，刷新頁面數(shù)據(jù)消失

項(xiàng)目中的token處理方法

兩者結(jié)合，加上封裝本地存儲模塊

本地存儲模塊：

// 封裝本地存儲模塊
?
// 存儲數(shù)據(jù)
export const setItem = (key, val) => {
? // 對象或數(shù)組要進(jìn)行轉(zhuǎn)換
? if (typeof val === 'object') {
? ? val = JSON.stringify(val)
? }
? localStorage.setItem(key, val)
}
?
// 獲得數(shù)據(jù)
export const getItem = (key) => {
? const data = localStorage.getItem(key)
? // 處理localStorage內(nèi)的數(shù)據(jù)
? // 不需要async
? try {
? ? return JSON.parse(data)
? } catch {
? ? return data
? }
}
?
// 刪除數(shù)據(jù)
export const removeItem = (key) => {
? localStorage.removeItem(key)
}

導(dǎo)出了存儲數(shù)據(jù)，獲取數(shù)據(jù)，和刪除數(shù)據(jù)的函數(shù)，數(shù)據(jù)的轉(zhuǎn)換在這里進(jìn)行

Vuex

import Vue from 'vue'
import Vuex from 'vuex'
// 導(dǎo)入本地存儲的模塊
import { setItem, getItem } from '@/assets/utils/storeage'
?
Vue.use(Vuex)
?
const tokenKey = 'user'
?
export default new Vuex.Store({
? state: {
? ? // 一個(gè)對象用于存儲當(dāng)前登錄用戶信息里面包含token等數(shù)據(jù)
? ? user: getItem(tokenKey)
? },
? mutations: {
? ? saveToken(state, data) {
? ? ? state.user = data
? ? ? // 為了防止刷新丟失需要把數(shù)據(jù)備份到本地存儲
? ? ? setItem(tokenKey, state.user)
? ? }
? },
? actions: {},
? modules: {}
})

實(shí)現(xiàn)了本地?cái)?shù)據(jù)存儲只是用來延長token存在的時(shí)間其他的一切操作都是用vuex內(nèi)的state.user內(nèi)的數(shù)據(jù)來進(jìn)行