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的信息為空
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue 如何import服務器上的js配置文件，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了Vue導出頁面為PDF格式的實現(xiàn)思路，其實思路也很簡單，就是將頁面轉換成圖片格式.然后通過圖片的base64碼.生成PDF..感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本文主要給大家介紹如何vue實現(xiàn)圖片拖拽及鼠標滾輪放大縮小,文中有詳細的代碼供大家參考,對我們的學習或工作有一定的幫助,需要的朋友可以參考下2023-08-08
Vue.js學習記錄之在元素與template中使用v-if指令實例
這篇文章主要給大家介紹了關于Vue.js學習記錄之在元素與template中使用v-if指令的相關資料，文中給出了詳細的示例代碼供大家參考學習，相信對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
利用nodeJS+vue圖片上傳實現(xiàn)更新頭像的過程
Vue是一套構建用戶界面的框架,最近工作中遇到了一個需求,需要做一個更新頭像的通能,下面這篇文章主要給大家介紹了關于利用nodeJS+vue圖片上傳的相關資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了關于Pinia狀態(tài)持久化問題，具有很好的參考價值，希望對大家有所幫助。2023-03-03
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
解決Vue運算符報錯:Syntax Error: Unexpected token問題
這篇文章主要介紹了解決Vue運算符報錯:Syntax Error: Unexpected token問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue 解決provide和inject響應的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11