vue使用localStorage保存登錄信息適用于移動端、PC端-創(chuàng)新互聯(lián)

眾所周知，vue可以用來開發(fā)移動端app，可以使用hbuilder將build好的vue打包成一個移動端app，但是用過之后就會發(fā)現(xiàn)，使用cookies或者session保存登錄的token，在手機端無法保存，每次打開app依然提示登錄。那么我們可以使用localStorage來保存登錄信息就可以了，具體代碼如下

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供周寧網(wǎng)站建設、周寧做網(wǎng)站、周寧網(wǎng)站設計、周寧網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、周寧企業(yè)網(wǎng)站模板建站服務，10年周寧做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

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
})

當前名稱：vue使用localStorage保存登錄信息適用于移動端、PC端-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article46/deoohg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、建站公司、虛擬主機、外貿(mào)網(wǎng)站建設、網(wǎng)站策劃、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)