Vue如何保持用戶登錄狀態(tài)

Vue如何保持用戶登錄狀態(tài)，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

在前端中，實(shí)現(xiàn)保持用戶登錄狀態(tài)的方法有很多種，你通過可以存Cookie、Session、Token等信息來保持，不管后臺向前端發(fā)送哪個(gè)我們要做的就是將這些信息存在在本地瀏覽器中，瀏覽器再次發(fā)送請求時(shí)，將設(shè)置了‘鍵'=‘值'的Cookie再次拋給服務(wù)器，服務(wù)器通過Cookie的字段判斷用戶已經(jīng)登錄，則根據(jù)需求處理用戶請求，否則返回400提示用戶先登錄，前面我也分享了相關(guān)的文章：Django：Cookie設(shè)置及跨域問題處理，Django：Cookie搭配Session使用，Django：基于Token的驗(yàn)證使用 。而作為前端，存儲這些值同樣有多種方式，你可以存在Cookie、LocalStorage、SessionStorage或者Vuex狀態(tài)管理器中，當(dāng)然他們的作用也不同，如Vue:LocalStorage與SessionStorage的區(qū)別與用法。

怎么設(shè)置Cookie

Django可以通過HttpResponse來響應(yīng)對象的set_cookie，設(shè)置好對應(yīng)的視圖和路由，只要通過瀏覽器訪問該路由，瀏覽器就會自動獲取到set_cookie值并存入到本地（當(dāng)瀏覽器正在運(yùn)行時(shí)通常都存在內(nèi)存中，當(dāng)瀏覽器關(guān)閉時(shí)通常會存入硬盤中）。

Cookie的缺點(diǎn)：

1，cookie存儲量?。?，cookie存儲個(gè)數(shù)有限；3，增加網(wǎng)絡(luò)負(fù)擔(dān)；4，存在安全隱患

 LocalStorage與SessionStorage存儲Token

如存入SessionStorage，在用戶登錄的時(shí)候，我們就需要將用戶名id和token存入sessionStorge,在Vue中實(shí)現(xiàn)同樣簡單的，通過sessionStorage.setItem或者sessionStorage['token']兩種寫法都可以實(shí)現(xiàn)。

.then(res =>{
                    if(res.data['code']==200){
                        localStorage.clear()
                        localStorage.setItem('info',1)
                        localStorage['flag']=1
                        // localStorage.setItem('flag',1)
                        sessionStorage.clear()
                        // sessionStorage['userid']=JSON.stringify(res.data.userInfo.id)
                        sessionStorage.setItem('userid',JSON.stringify(res.data.userInfo.id))
                        sessionStorage['token']=JSON.stringify(res.data.token)
                        this.$message({
                            message:'登錄成功',
                            type:'success'
                        })
                        this.$router.push('/home')
                    }else{
                        this.$message({
                            message:'用戶名或者密碼錯(cuò)誤',
                            type:'warning'
                        })
                        }
                })

這樣我們就可以在瀏覽器的開發(fā)者工具中的application中找到Session Storge查看，里面存的就是我們剛剛獲取的值，至于到底存LocalStorage與SessionStorage，就看項(xiàng)目需求了。

 LocalStorage與SessionStorage的主要區(qū)別：

LocalStorage除非主動刪除，否則會永久存儲在瀏覽器中。

SessionStorage只在當(dāng)前所在窗口關(guān)閉前有效，窗口關(guān)閉后其存儲數(shù)據(jù)也就會被自動清除。

Vuex存儲Token

 在store文件的state中初始化token，因?yàn)閟tate中的數(shù)據(jù)不支持直接修改，所以我們需要定義方法setToken(設(shè)置token) 和 getToken(獲取token)，然后我們就可以在登錄接口處引入this.$store.commit('setToken',JSON.stringify(res.data.token))，將后臺傳來的token存入Vuex和localStorage中，為什么還要存入localStorage，Vuex中的狀態(tài)一旦頁面刷新就不再存在，為了保持當(dāng)前狀態(tài)，需要通過localStorage中提取狀態(tài)再傳值給Vuex。

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    token:''  //初始化token
  },
  mutations: {
    //存儲token方法
    //設(shè)置token等于外部傳遞進(jìn)來的值
    setToken(state, token) {
        state.token = token
        localStorage.token = token //同步存儲token至localStorage
      },
  },
 getters : {
  //獲取token方法
  //判斷是否有token,如果沒有重新賦值，返回給state的token
  getToken(state) {
    if (!state.token) {
      state.token = localStorage.getItem('token')
    }
    return state.token
    }
  },
  actions: {
 
  }
})

為什么要使用Vuex

Vuex是一個(gè)狀態(tài)管理器而非一個(gè)存儲工具，為什么會把token存入Vuex中呢，在Vuex中封裝的localStorage操作，可以直接使用localStorage操作數(shù)據(jù)，但無法監(jiān)聽數(shù)據(jù)改變。而Vuex是全局存儲同時(shí)可監(jiān)聽數(shù)據(jù)狀態(tài)的變更，當(dāng)Vuex數(shù)值發(fā)生變化時(shí)可以響應(yīng)式地監(jiān)聽到該數(shù)據(jù)的變化。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。