欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年08月08日 10:04:18   作者:~浮生  
這篇文章主要介紹了vue獲取token(設(shè)置token,清除token)實現(xiàn)登錄方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

使用token做登錄驗證

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

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

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

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

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

//設(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中,缺點:

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

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

VUEX的存儲方法

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

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

項目中的token處理方法

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

本地存儲模塊:

// 封裝本地存儲模塊
?
// 存儲數(shù)據(jù)
export const setItem = (key, val) => {
? // 對象或數(shù)組要進行轉(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)換在這里進行

 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: {
? ? // 一個對象用于存儲當(dāng)前登錄用戶信息里面包含token等數(shù)據(jù)
? ? user: getItem(tokenKey)
? },
? mutations: {
? ? saveToken(state, data) {
? ? ? state.user = data
? ? ? // 為了防止刷新丟失需要把數(shù)據(jù)備份到本地存儲
? ? ? setItem(tokenKey, state.user)
? ? }
? },
? actions: {},
? modules: {}
})

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

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

最新評論