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

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

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

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

使用token做登錄驗證

1、登錄的時候前端調用后端的接口，把用戶名和密碼傳給后端。

2、后端收到請求，驗證用戶名和密碼，返回給前端一個token值。

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

cookie ：可設置失效時間，否則默認為關閉瀏覽器后消失
localStorage ：除非被手動清除，否則永久保存
sessionStorage：僅在當前網頁會話下有效，關閉頁面或瀏覽器后就會被清除

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

//設置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中，缺點：

1 數(shù)據并非響應式，需要進行特殊處理

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

VUEX的存儲方法

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

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

項目中的token處理方法

兩者結合，加上封裝本地存儲模塊

本地存儲模塊：

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

導出了存儲數(shù)據，獲取數(shù)據，和刪除數(shù)據的函數(shù)，數(shù)據的轉換在這里進行

Vuex

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

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