快捷導(dǎo)航

Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)

更新時(shí)間：2021年09月18日 15:24:34 作者：ProgramNotes

本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

vue實(shí)戰(zhàn)開發(fā)020:LocalStorage與SessionStorage的區(qū)別與用法

怎么設(shè)置Cookie

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

Django實(shí)戰(zhàn)006：Cookie設(shè)置及跨域問題處理

Cookie的缺點(diǎn)：

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

LocalStorage與SessionStorage存儲(chǔ)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除非主動(dòng)刪除，否則會(huì)永久存儲(chǔ)在瀏覽器中。

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

vue實(shí)戰(zhàn)開發(fā)020:LocalStorage與SessionStorage的區(qū)別與用法

Vuex存儲(chǔ)Token

在store文件的state中初始化token，因?yàn)閟tate中的數(shù)據(jù)不支持直接修改，所以我們需要定義方法setToken(設(shè)置token) 和 getToken(獲取token)，然后我們就可以在登錄接口處引入this.$store.commit('setToken',JSON.stringify(res.data.token))，將后臺(tái)傳來的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: {
    //存儲(chǔ)token方法
    //設(shè)置token等于外部傳遞進(jìn)來的值
    setToken(state, token) {
        state.token = token
        localStorage.token = token //同步存儲(chǔ)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è)存儲(chǔ)工具，為什么會(huì)把token存入Vuex中呢，在Vuex中封裝的localStorage操作，可以直接使用localStorage操作數(shù)據(jù)，但無法監(jiān)聽數(shù)據(jù)改變。而Vuex是全局存儲(chǔ)同時(shí)可監(jiān)聽數(shù)據(jù)狀態(tài)的變更，當(dāng)Vuex數(shù)值發(fā)生變化時(shí)可以響應(yīng)式地監(jiān)聽到該數(shù)據(jù)的變化。