Vue中保存用戶登錄狀態(tài)實例代碼

更新時間：2017年06月07日 11:19:56 作者：HaiJing1995

本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。、

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

登錄組件中用戶點擊登錄后，后臺會傳過來一個用戶名，我的App.vue組件中需要拿到這個用戶名，并將上面的“登錄注冊”字樣變?yōu)椤坝脩裘薄?

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

代碼如下:

   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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
登錄

相關(guān)文章

Vue如何處理圖片加載失敗時自動替換備用圖片
這篇文章主要為大家詳細介紹了當(dāng)圖片加載失敗時,Vue如何實現(xiàn)自動替換備用圖片功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解下
2024-11-11
Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)
這篇文章主要介紹了Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
前端vue3中的ref與reactive用法及區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于前端vue3中的ref與reactive用法及區(qū)別的相關(guān)資料,關(guān)于ref及reactive的用法,還是要在開發(fā)中多多使用,遇到響應(yīng)式失效問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-08-08
詳細聊聊vue中組件的props屬性
父子組件之間的通信就是props down,events up,父組件通過屬性props向下傳遞數(shù)據(jù)給子組件,子組件通過事件events 給父組件發(fā)送消息,這篇文章主要給大家介紹了關(guān)于vue中組件的props屬性的相關(guān)資料,需要的朋友可以參考下
2021-11-11
Vue與Node.js通過socket.io通信的示例代碼
這篇文章主要介紹了Vue與Node.js通過socket.io通信的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
VUE項目中調(diào)用高德地圖的全流程講解
這篇文章主要介紹了VUE項目中調(diào)用高德地圖的全流程講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
基于Vue3實現(xiàn)高性能拖拽指令
在現(xiàn)代前端開發(fā)中,拖拽功能是增強用戶體驗的重要手段之一,本文將詳細介紹如何在Vue3中封裝一個拖拽指令并通過實戰(zhàn)例子演示其實現(xiàn)過程,希望對大家有所幫助
2024-11-11
vue-cli多頁面應(yīng)用實踐之實現(xiàn)組件預(yù)覽項目
在最近的項目中遇到了一個需求,找了相關(guān)資料后終于實現(xiàn),這篇文章主要給大家介紹了關(guān)于vue-cli多頁面應(yīng)用實踐之實現(xiàn)組件預(yù)覽項目的相關(guān)資料,需要的朋友可以參考下
2022-05-05
Vue實現(xiàn)微信支付功能遇到的坑
這篇文章主要介紹了Vue實現(xiàn)微信支付功能遇到的坑,本文是小編記錄整理下拉的，以便日后所需，需要的朋友可以參考下
2019-06-06
vue路由導(dǎo)航守衛(wèi)和請求攔截以及基于node的token認證的方法
這篇文章主要介紹了vue路由導(dǎo)航守衛(wèi)和請求攔截以及基于node的token認證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04