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