富贵资源网 Design By www.hznty.com
众所周知,vue可以用来开发移动端app,可以使用hbuilder将build好的vue打包成一个移动端app,但是用过之后就会发现,使用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为访问状态对象 数字常量等 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 })
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) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。