vue使用localStorage保存登錄信息 適用于移動端、PC端
眾所周知,vue可以用來開發(fā)移動端app,可以使用hbuilder將build好的vue打包成一個移動端app,但是用過之后就會發(fā)現(xiàn),使用cookies或者session保存登錄的token,在手機端無法保存,每次打開app依然提示登錄。那么我們可以使用localStorage來保存登錄信息就可以了,具體代碼如下
1、vuex stroe代碼
index.js
import Vue from 'vue' import vuex from 'vuex' import { login, logout, getInfo } from '@/api/login' import { getToken, setToken, removeToken, setlocalStorage, getlocalStorage, removelocalStorage } from '@/utils/user' Vue.use(vuex); //state為訪問狀態(tài)對象 數(shù)字常量等 const state = { x:5, token: getlocalStorage(), nickname: '', course_id: 0, user_id: 0, group_id: 0, begin_group_num: 0, student_group: 0 }; //訪問觸發(fā)狀態(tài)mutation是同步的 //actions是異步的 const mutations = { SET_TOKEN: (state, token) => { state.token = token }, SET_NAME: (state, nickname) => { state.nickname = nickname }, }; const actions = { Login({ commit }, userInfo) { const username = userInfo.username.trim() return new Promise((resolve, reject) => { login(username, userInfo.password).then(response => { const data = response.data setlocalStorage(data.token) commit('SET_TOKEN', data.token) resolve() }).catch(error => { console.log() reject(error) }) }) }, GetInfo({ commit }) { return new Promise((resolve, reject) => { getInfo().then(response => { const data = response.data console.log(data) commit('SET_NAME', data.nickname) resolve() }).catch(error => { console.log() }) }) }, // 前端 登出 FedLogOut({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') removelocalStorage() resolve() }) } }; //getters 類似于生命周期里面的鉤子,getters是在頁面剛剛加載完畢之后馬上加載,類似于生命周期里面的created const getters = { // 測試getters x: state => state.x + 200, }; export default new vuex.Store({ state, mutations, getters, actions })
2、localStorage 代碼
user.js
import Cookies from 'js-cookie' const TokenKey = 'MuseUi-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(token) { return Cookies.set(TokenKey, token) } export function removeToken() { return Cookies.remove(TokenKey) } const SessionKey = 'usertoken' export function setlocalStorage(token) { return localStorage.setItem(SessionKey,token) } export function getlocalStorage() { return localStorage.getItem(SessionKey) } export function removelocalStorage() { return localStorage.setItem(SessionKey,null) }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
- 教你在Vue3中使用useStorage輕松實現(xiàn)localStorage功能
- VUE使用localstorage和sessionstorage實現(xiàn)登錄示例詳解
- vue如何使用cookie、localStorage和sessionStorage進行儲存數(shù)據(jù)
- Vue使用localStorage存儲數(shù)據(jù)的方法
- Vue項目使用localStorage+Vuex保存用戶登錄信息
- 詳解vue中l(wèi)ocalStorage的使用方法
- 詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
- vue中的localStorage使用方法詳解
相關(guān)文章
vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)
這篇文章主要介紹了vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue3新特性Suspense和Teleport應(yīng)用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實現(xiàn)動態(tài)加載,同時,Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07詳解vue中router-link標(biāo)簽所必備了解的屬性
這篇文章主要介紹了vue中router-link標(biāo)簽所必備了解的屬性,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04解決vue net :ERR_CONNECTION_REFUSED報錯問題
這篇文章主要介紹了解決vue net :ERR_CONNECTION_REFUSED報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue3?使用?vue3-video-play實現(xiàn)在線視頻播放
這篇文章主要介紹了vue3?使用?vue3-video-play?進行在線視頻播放,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06vue中提示$index is not defined錯誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue el-table實現(xiàn)多選框回填的示例代碼
摘要:Vue多選框回填是實現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實現(xiàn)多選框回填的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01