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