vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端
眾所周知,vue可以用來(lái)開(kāi)發(fā)移動(dòng)端app,可以使用hbuilder將build好的vue打包成一個(gè)移動(dòng)端app,但是用過(guò)之后就會(huì)發(fā)現(xiàn),使用cookies或者session保存登錄的token,在手機(jī)端無(wú)法保存,每次打開(kāi)app依然提示登錄。那么我們可以使用localStorage來(lái)保存登錄信息就可以了,具體代碼如下
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為訪問(wèn)狀態(tài)對(duì)象 數(shù)字常量等
const state = {
x:5,
token: getlocalStorage(),
nickname: '',
course_id: 0,
user_id: 0,
group_id: 0,
begin_group_num: 0,
student_group: 0
};
//訪問(wèn)觸發(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 類(lèi)似于生命周期里面的鉤子,getters是在頁(yè)面剛剛加載完畢之后馬上加載,類(lèi)似于生命周期里面的created
const getters = {
// 測(cè)試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)
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
- 教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
- VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解
- vue如何使用cookie、localStorage和sessionStorage進(jìn)行儲(chǔ)存數(shù)據(jù)
- Vue使用localStorage存儲(chǔ)數(shù)據(jù)的方法
- Vue項(xiàng)目使用localStorage+Vuex保存用戶登錄信息
- 詳解vue中l(wèi)ocalStorage的使用方法
- 詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
- vue中的localStorage使用方法詳解
相關(guān)文章
vue中實(shí)現(xiàn)上傳文件給后臺(tái)實(shí)例詳解
在本文里小編給大家分享了一篇關(guān)于vue中實(shí)現(xiàn)上傳文件給后臺(tái)的實(shí)例內(nèi)容,有需要此功能的可以學(xué)習(xí)參考下。2019-08-08
Vue利用廣度優(yōu)先搜索實(shí)現(xiàn)watch
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用廣度優(yōu)先搜索實(shí)現(xiàn)watch(有意思),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換
在處理文本數(shù)據(jù)的時(shí)候,我們經(jīng)常會(huì)需要把文本數(shù)據(jù)的行與列進(jìn)行轉(zhuǎn)換操作,這樣更方便查看,本文就詳細(xì)的介紹了vue3+el-table實(shí)現(xiàn)行列轉(zhuǎn)換,感興趣的可以了解一下2021-06-06
el-upload多選文件上傳報(bào)錯(cuò)解決方案
本文主要介紹了el-upload多選文件上傳報(bào)錯(cuò)解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue+Openlayers自定義軌跡動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Vue+Openlayers自定義軌跡動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
vue2如何使用face-api.js實(shí)現(xiàn)人臉識(shí)別功能
本文介紹了如何在Vue.js項(xiàng)目中利用face-api.js實(shí)現(xiàn)人臉識(shí)別功能,首先需要安裝Vue.js和face-api.js以及其依賴TensorFlow.js,接著,下載并配置必要的模型文件到項(xiàng)目目錄,之后,將人臉識(shí)別功能封裝成Vue組件,并在組件中通過(guò)視頻流進(jìn)行人臉檢測(cè)和結(jié)果展示2024-09-09
vite的proxy查看真實(shí)請(qǐng)求地址方式詳解
這篇文章主要為大家介紹了vite的proxy查看真實(shí)請(qǐng)求地址方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
深入探討Vue計(jì)算屬性與監(jiān)聽(tīng)器的區(qū)別和用途
在Vue的開(kāi)發(fā)中,計(jì)算屬性(Computed Properties)和監(jiān)聽(tīng)器(Watchers)是兩種非常重要的概念,它們都用于響應(yīng)式地處理數(shù)據(jù)變化,本文將帶你深入了解計(jì)算屬性和監(jiān)聽(tīng)器的區(qū)別,以及在何時(shí)使用它們,感興趣的朋友可以參考下2023-09-09

