Vue中保存用戶登錄狀態(tài)實(shí)例代碼
更新時(shí)間：2017年06月07日 11:19:56 作者：HaiJing1995
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。、
首先我們假設(shè)，這里的登錄組件（register.vue）是App.vue組件的子組件，是通過路由進(jìn)入登錄組件的。
登錄組件中用戶點(diǎn)擊登錄后，后臺(tái)會(huì)傳過來一個(gè)用戶名，我的App.vue組件中需要拿到這個(gè)用戶名，并將上面的“登錄注冊”字樣變?yōu)椤坝脩裘薄?
為了保證用戶刷新后用戶名不會(huì)消失，這里我用到了sessionStorage
代碼如下:
register.vue中用戶點(diǎn)擊登錄觸發(fā)signIn方法
signIn(){
this.formData = $(".form").serialize();
var that = this;
this.$http.get("/api/user", this.formData)
.then(response => {
that.userName = response.data.data.user.userName;
that.userHead = response.data.data.userHead;
that.$emit('userSignIn', that.userName);
})
.catch(error => {
console.log(error);
});
}
這里為了測試我直接mock的數(shù)據(jù)，真實(shí)情況應(yīng)該是this.$http.post
這里的重點(diǎn)是那句
that.$emit('userSignIn', that.userName);
向父組件（App.vue）傳值
App.vue代碼HTML
<keep-alive> <router-view @userSignIn="userSignIn"></router-view> </keep-alive>
App.vue代碼JS
export default {
data(){
return{
userName: sessionStorage.userName
}
},
methods:{
//子組件(register)將用戶名傳過來
userSignIn(userName){
sessionStorage.userName = userName;
this.userName = sessionStorage.userName;
}
}
}
這樣父組件就可以使用用戶名，保持了登錄狀態(tài)，并且因?yàn)槭褂昧藄essionStorage，刷新頁面也可以保持。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何處理圖片加載失敗時(shí)自動(dòng)替換備用圖片
這篇文章主要為大家詳細(xì)介紹了當(dāng)圖片加載失敗時(shí),Vue如何實(shí)現(xiàn)自動(dòng)替換備用圖片功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解下2024-11-11
Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)
這篇文章主要介紹了Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
前端vue3中的ref與reactive用法及區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于前端vue3中的ref與reactive用法及區(qū)別的相關(guān)資料,關(guān)于ref及reactive的用法,還是要在開發(fā)中多多使用,遇到響應(yīng)式失效問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
父子組件之間的通信就是props down,events up,父組件通過屬性props向下傳遞數(shù)據(jù)給子組件,子組件通過事件events 給父組件發(fā)送消息,這篇文章主要給大家介紹了關(guān)于vue中組件的props屬性的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了Vue與Node.js通過socket.io通信的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
VUE項(xiàng)目中調(diào)用高德地圖的全流程講解
這篇文章主要介紹了VUE項(xiàng)目中調(diào)用高德地圖的全流程講解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在現(xiàn)代前端開發(fā)中,拖拽功能是增強(qiáng)用戶體驗(yàn)的重要手段之一,本文將詳細(xì)介紹如何在Vue3中封裝一個(gè)拖拽指令并通過實(shí)戰(zhàn)例子演示其實(shí)現(xiàn)過程,希望對大家有所幫助2024-11-11
vue-cli多頁面應(yīng)用實(shí)踐之實(shí)現(xiàn)組件預(yù)覽項(xiàng)目
在最近的項(xiàng)目中遇到了一個(gè)需求,找了相關(guān)資料后終于實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于vue-cli多頁面應(yīng)用實(shí)踐之實(shí)現(xiàn)組件預(yù)覽項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue實(shí)現(xiàn)微信支付功能遇到的坑,本文是小編記錄整理下拉的，以便日后所需，需要的朋友可以參考下2019-06-06
vue路由導(dǎo)航守衛(wèi)和請求攔截以及基于node的token認(rèn)證的方法
這篇文章主要介紹了vue路由導(dǎo)航守衛(wèi)和請求攔截以及基于node的token認(rèn)證的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04