首先我們假設，這里的登錄組件(register.vue)是App.vue組件的子組件，是通過路由進入登錄組件的。

登錄組件中用戶點擊登錄后，后臺會傳過來一個用戶名，我的App.vue組件中需要拿到這個用戶名，并將上面的“登錄注冊”字樣變為“用戶名”。

為了保證用戶刷新后用戶名不會消失，這里我用到了sessionStorage

代碼如下:

register.vue中用戶點擊登錄觸發signIn方法

{

that.userName = response.data.data.user.userName;

that.userHead = response.data.data.userHead;

that.$emit('userSignIn',that.userName);

})

.catch(error => {

console.log(error);

});

}

這里為了測試我直接mock的數據，真實情況應該是this.$http.post

這里的重點是那句

向父組件(App.vue)傳值

App.vue代碼HTML

App.vue代碼JS

data(){

return{

userName: sessionStorage.userName

}

},methods:{

//子組件(register)將用戶名傳過來

userSignIn(userName){

sessionStorage.userName = userName;

this.userName = sessionStorage.userName;

}

}

}

這樣父組件就可以使用用戶名，保持了登錄狀態，并且因為使用了sessionStorage，刷新頁面也可以保持。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持編程之家。

總結

以上是編程之家為你收集整理的Vue中保存用戶登錄狀態實例代碼全部內容，希望文章能夠幫你解決Vue中保存用戶登錄狀態實例代碼所遇到的程序開發問題。

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html 存储登录状态,Vue中保存用户登录状态实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。