眾所周知,vue可以用來開發移動端app,可以使用hbuilder將build好的vue打包成一個移動端app,但是用過之后就會發現,使用cookies或者session保存登錄的token,在手機端無法保存,每次打開app依然提示登錄。那么我們可以使用localStorage來保存登錄信息就可以了,具體代碼如下
成都創新互聯專業為企業提供周寧網站建設、周寧做網站、周寧網站設計、周寧網站制作等企業網站建設、網頁設計與制作、周寧企業網站模板建站服務,10年周寧做網站經驗,不只是建網站,更提供有價值的思路和整體網絡服務。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為訪問狀態對象 數字常量等 const state = { x:5, token: getlocalStorage(), nickname: '', course_id: 0, user_id: 0, group_id: 0, begin_group_num: 0, student_group: 0 }; //訪問觸發狀態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 })
當前名稱:vue使用localStorage保存登錄信息適用于移動端、PC端-創新互聯
文章路徑:http://vcdvsql.cn/article46/deoohg.html
成都網站建設公司_創新互聯,為您提供Google、建站公司、虛擬主機、外貿網站建設、網站策劃、網站營銷
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯