Vue中保存用戶登錄狀態(tài)實例代碼
更新時間：2017年06月07日 11:19:56 作者：HaiJing1995
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。、
首先我們假設(shè)，這里的登錄組件（register.vue）是App.vue組件的子組件，是通過路由進(jìn)入登錄組件的。
登錄組件中用戶點擊登錄后，后臺會傳過來一個用戶名，我的App.vue組件中需要拿到這個用戶名，并將上面的“登錄注冊”字樣變?yōu)椤坝脩裘薄?
為了保證用戶刷新后用戶名不會消失，這里我用到了sessionStorage
代碼如下:
register.vue中用戶點擊登錄觸發(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ù)，真實情況應(yīng)該是this.$http.post
這里的重點是那句
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)，并且因為使用了sessionStorage，刷新頁面也可以保持。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue改變循環(huán)遍歷后的數(shù)據(jù)實例
今天小編就為大家分享一篇vue改變循環(huán)遍歷后的數(shù)據(jù)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中的過濾器，本文通過文字實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue跳轉(zhuǎn)頁面并且實現(xiàn)參數(shù)傳遞接受示例
這篇文章主要為大家介紹了vue跳轉(zhuǎn)頁面并且實現(xiàn)參數(shù)傳遞接受示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了Jeeplus-vue?實現(xiàn)文件的上傳，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue項目因內(nèi)存溢出啟動報錯的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要介紹了Vue3+ElementPlus 表單組件的封裝實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue項目支付功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)div拖拽互換位置的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
在vue react中如何使用Web Components組件
這篇文章主要介紹了在vue react中如何使用Web Components組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue3中給數(shù)組賦值丟失響應(yīng)式的解決方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04