vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄方式

更新時(shí)間：2023年08月08日 10:04:18 作者：~浮生

這篇文章主要介紹了vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄

使用token做登錄驗(yàn)證

1、登錄的時(shí)候前端調(diào)用后端的接口，把用戶名和密碼傳給后端。

2、后端收到請(qǐng)求，驗(yàn)證用戶名和密碼，返回給前端一個(gè)token值。

3、前端收到后端傳給的token值，將token存儲(chǔ)在本地有3種方法我們選用 sessionStorage

cookie ：可設(shè)置失效時(shí)間，否則默認(rèn)為關(guān)閉瀏覽器后消失
localStorage ：除非被手動(dòng)清除，否則永久保存
sessionStorage：僅在當(dāng)前網(wǎng)頁(yè)會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后就會(huì)被清除

在utils中創(chuàng)建auth.js用來(lái)封裝方法

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

在min.js全局引入

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

vue中token的處理

傳統(tǒng)的token處理

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

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

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

VUEX的存儲(chǔ)方法

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

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

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

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

本地存儲(chǔ)模塊：

// 封裝本地存儲(chǔ)模塊
?
// 存儲(chǔ)數(shù)據(jù)
export const setItem = (key, val) => {
? // 對(duì)象或數(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)出了存儲(chǔ)數(shù)據(jù)，獲取數(shù)據(jù)，和刪除數(shù)據(jù)的函數(shù)，數(shù)據(jù)的轉(zhuǎn)換在這里進(jìn)行

Vuex

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

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