vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問(wèn)題
項(xiàng)目背景
首先介紹一下，項(xiàng)目中用了vuex;
從前端頁(yè)面來(lái)講，如果登錄表單的內(nèi)容驗(yàn)證都通過(guò)之后，當(dāng)我們點(diǎn)擊登錄按鈕的時(shí)候向后臺(tái)發(fā)送請(qǐng)求，請(qǐng)求成功后，后臺(tái)會(huì)給我們返回信息，其中信息會(huì)有sessionStr和sessionId等個(gè)人標(biāo)識(shí)（我的理解是后臺(tái)根據(jù)這個(gè)sessionStr和sessionId在control層或者其他層來(lái)寫(xiě)登錄的人的個(gè)人信息）所以當(dāng)我們點(diǎn)擊退出的時(shí)候，一般會(huì)像后臺(tái)再發(fā)送一個(gè)協(xié)議，協(xié)議中會(huì)包括sessionStr和sessionId。
以上是我對(duì)邏輯功能的大致理解，好了上代碼吧；
首先項(xiàng)目中實(shí)現(xiàn)的效果是登錄之前頭部只展示登錄和注冊(cè)登錄之后頭部展示個(gè)人賬號(hào)，資產(chǎn),訂單和退出等。
既然是在登錄成功之后頭部組件的樣式發(fā)生變化，那么提交給mutation(vuex)的內(nèi)容則應(yīng)該在登錄組件中寫(xiě)。
登錄成功后將userId,sessionStr和tel提交到vuex這樣我在頭部的組件也可以用
將session信息存到locolStorage里面（寫(xiě)到這時(shí)，我想有些人會(huì)想，為什么要存到locolstorage中，理由是如果不存到locolstorage里，刷新頁(yè)面的時(shí)候，vuex會(huì)清空數(shù)據(jù)，所以存到locolstorage里面）
好了下面就是頁(yè)面上的應(yīng)用了
在header組件中應(yīng)引入
頁(yè)面上的判斷是
寫(xiě)到這里已經(jīng)完成了頭部組件的樣式改變，接下來(lái)就是點(diǎn)擊退出時(shí)我們應(yīng)該做的：
點(diǎn)擊退出，我們要給后臺(tái)發(fā)送這個(gè)人的session信息；
并且我們要講頁(yè)面頭部樣式換回以前的登錄和注冊(cè)，所以此時(shí)提交setSessionInfo的信息為空
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
vue使用element-ui tabs切換echarts解決寬度100%方式
這篇文章主要介紹了vue使用element-ui tabs切換echarts解決寬度100%方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue3?使用defineExpose的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能) ,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了深入解讀VUE中的異步渲染的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開(kāi)發(fā)的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以參考下2018-03-03
這篇文章主要介紹了關(guān)于pinia的簡(jiǎn)單使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了基于elementUI豎向表格、和并列的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vant2移動(dòng)端Vue組件庫(kù)問(wèn)題記錄
Vant是一套輕量、可靠的移動(dòng)端組件庫(kù),通過(guò)Vant可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面,提升開(kāi)發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于Vant2移動(dòng)端Vue組件庫(kù)問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05