vue獲取token(設(shè)置token,清除token)實現(xiàn)登錄方式
vue獲取token(設(shè)置token,清除token)實現(xiàn)登錄
使用token做登錄驗證
1、登錄的時候前端調(diào)用后端的接口,把用戶名和密碼傳給后端。
2、后端收到請求,驗證用戶名和密碼,返回給前端一個token值。
3、前端收到后端傳給的token值,將token存儲在本地 有3種方法我們選用 sessionStorage
- cookie :可設(shè)置失效時間,否則默認為關(guān)閉瀏覽器后消失
- localStorage :除非被手動清除,否則永久保存
- sessionStorage:僅在當(dāng)前網(wǎng)頁會話下有效,關(guān)閉頁面或瀏覽器后就會被清除
在utils中創(chuàng)建auth.js用來封裝方法
//設(shè)置token export function setToken(token) { // token 代表要存儲到本得的值 return sessionStorage.setItem("儲存到本地的名字", token) } //獲取token export function getToken() { return sessionStorage.getItem("儲存到本地的名字") } //清除token export function removeToken() { return sessionStorage.removeItem("要清除的名字") }
在min.js全局引入
import { getToken, setToken, removeToken } from '@/utils/auth'
vue中token的處理
傳統(tǒng)的token處理
直接存儲到localstorage或者sessionStorage中,缺點:
1 數(shù)據(jù)并非響應(yīng)式,需要進行特殊處理
2 存取麻煩,在存儲對象數(shù)組類型的時候要用JSON轉(zhuǎn)換為JSON類型的字符串
VUEX的存儲方法
通過mutations定義的函數(shù)將數(shù)據(jù)存儲到Vuex的state中
缺點: 數(shù)據(jù)存儲的有效時間短,刷新頁面數(shù)據(jù)消失
項目中的token處理方法
兩者結(jié)合,加上封裝本地存儲模塊
本地存儲模塊:
// 封裝本地存儲模塊 ? // 存儲數(shù)據(jù) export const setItem = (key, val) => { ? // 對象或數(shù)組要進行轉(zhuǎn)換 ? if (typeof val === 'object') { ? ? val = JSON.stringify(val) ? } ? localStorage.setItem(key, val) } ? // 獲得數(shù)據(jù) export const getItem = (key) => { ? const data = localStorage.getItem(key) ? // 處理localStorage內(nèi)的數(shù)據(jù) ? // 不需要async ? try { ? ? return JSON.parse(data) ? } catch { ? ? return data ? } } ? // 刪除數(shù)據(jù) export const removeItem = (key) => { ? localStorage.removeItem(key) }
導(dǎo)出了存儲數(shù)據(jù),獲取數(shù)據(jù),和刪除數(shù)據(jù)的函數(shù),數(shù)據(jù)的轉(zhuǎn)換在這里進行
Vuex
import Vue from 'vue' import Vuex from 'vuex' // 導(dǎo)入本地存儲的模塊 import { setItem, getItem } from '@/assets/utils/storeage' ? Vue.use(Vuex) ? const tokenKey = 'user' ? export default new Vuex.Store({ ? state: { ? ? // 一個對象用于存儲當(dāng)前登錄用戶信息里面包含token等數(shù)據(jù) ? ? user: getItem(tokenKey) ? }, ? mutations: { ? ? saveToken(state, data) { ? ? ? state.user = data ? ? ? // 為了防止刷新丟失需要把數(shù)據(jù)備份到本地存儲 ? ? ? setItem(tokenKey, state.user) ? ? } ? }, ? actions: {}, ? modules: {} })
實現(xiàn)了本地數(shù)據(jù)存儲只是用來延長token存在的時間其他的一切操作都是用vuex內(nèi)的state.user內(nèi)的數(shù)據(jù)來進行
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)詳解
element-ui中的table的多選很好用,但是如果其中某一項禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關(guān)于element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)的相關(guān)資料,需要的朋友可以參考下2023-01-01vue watch普通監(jiān)聽和深度監(jiān)聽實例詳解(數(shù)組和對象)
這篇文章主要介紹了vue watch普通監(jiān)聽和深度監(jiān)聽(數(shù)組和對象),文中單獨通過代碼給大家介紹了vue watch 深度監(jiān)聽的方法,感興趣的朋友一起看看吧2018-08-08vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)
這篇文章主要介紹了vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)的方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-05-05vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue2.0 實現(xiàn)導(dǎo)航守衛(wèi)(路由守衛(wèi))
vue-route 提供的 beforeRouteUpdate 可以方便地實現(xiàn)導(dǎo)航守衛(wèi)(navigation-guards)。這篇文章主要介紹了vue2.0 實現(xiàn)導(dǎo)航守衛(wèi)(路由守衛(wèi))的相關(guān)知識,需要的朋友可以參考下2018-05-05