欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用localStorage保存登錄信息 適用于移動端、PC端

 更新時間:2019年05月27日 15:52:30   作者:haeasringnar  
這篇文章主要為大家詳細介紹了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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)

    vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)

    這篇文章主要介紹了vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue3新特性Suspense和Teleport應(yīng)用場景分析

    Vue3新特性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)簽所必備了解的屬性

    這篇文章主要介紹了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報錯問題

    這篇文章主要介紹了解決vue net :ERR_CONNECTION_REFUSED報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue3?使用?vue3-video-play實現(xiàn)在線視頻播放

    vue3?使用?vue3-video-play實現(xiàn)在線視頻播放

    這篇文章主要介紹了vue3?使用?vue3-video-play?進行在線視頻播放,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-06-06
  • Vue日期時間選擇器組件使用方法詳解

    Vue日期時間選擇器組件使用方法詳解

    這篇文章主要為大家詳細介紹了Vue日期時間選擇器組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue中提示$index is not defined錯誤的解決方式

    vue中提示$index is not defined錯誤的解決方式

    這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue二次封裝axios為插件使用詳解

    Vue二次封裝axios為插件使用詳解

    這篇文章主要介紹了Vue二次封裝axios為插件使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • 解決webpack+Vue引入iView找不到字體文件的問題

    解決webpack+Vue引入iView找不到字體文件的問題

    今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue el-table實現(xiàn)多選框回填的示例代碼

    vue el-table實現(xiàn)多選框回填的示例代碼

    摘要:Vue多選框回填是實現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實現(xiàn)多選框回填的示例代碼,具有一定的參考價值,感興趣的可以了解一下
    2024-01-01

最新評論