在前端中，實現(xiàn)保持用戶登錄狀態(tài)的方法有很多種，你通過可以存Cookie、Session、Token等信息來保持，不管后臺向前端發(fā)送哪個我們要做的就是將這些信息存在在本地瀏覽器中，瀏覽器再次發(fā)送請求時，將設(shè)置了‘鍵'=‘值'的Cookie再次拋給服務(wù)器，服務(wù)器通過Cookie的字段判斷用戶已經(jīng)登錄，則根據(jù)需求處理用戶請求，否則返回400提示用戶先登錄，前面我也分享了相關(guān)的文章：Django：Cookie設(shè)置及跨域問題處理，Django：Cookie搭配Session使用，Django：基于Token的驗證使用 。而作為前端，存儲這些值同樣有多種方式，你可以存在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)瀏覽器正在運行時通常都存在內(nèi)存中，當(dāng)瀏覽器關(guān)閉時通常會存入硬盤中）。

Cookie的缺點：

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

 LocalStorage與SessionStorage存儲Token

如存入SessionStorage，在用戶登錄的時候，我們就需要將用戶名id和token存入sessionStorge,在Vue中實現(xiàn)同樣簡單的，通過sessionStorage.setItem或者sessionStorage['token']兩種寫法都可以實現(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:'用戶名或者密碼錯誤',
                            type:'warning'
                        })
                        }
                })

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

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

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

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

Vuex存儲Token

 在store文件的state中初始化token，因為state中的數(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等于外部傳遞進來的值
    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是一個狀態(tài)管理器而非一個存儲工具，為什么會把token存入Vuex中呢，在Vuex中封裝的localStorage操作，可以直接使用localStorage操作數(shù)據(jù)，但無法監(jiān)聽數(shù)據(jù)改變。而Vuex是全局存儲同時可監(jiān)聽數(shù)據(jù)狀態(tài)的變更，當(dāng)Vuex數(shù)值發(fā)生變化時可以響應(yīng)式地監(jiān)聽到該數(shù)據(jù)的變化。

到此這篇關(guān)于Vue保持用戶登錄狀態(tài)(各種token存儲方式)的文章就介紹到這了,更多相關(guān)Vue保持用戶登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論