时间:2021-05-26
众所周知,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是在页面刚刚加载完毕之后马上加载,类似于生命周期里面的createdconst 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)}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
针对移动用户,网页设计人员会在PC端网页之外单独建立一个适用于移动设备的独立站点,被称为移动端网站。PC端导航和移动端导航属于非响应式的,主要采用两种布局方式,
PC就是私人电脑,PC端就是指电脑这一方,而pc登录就是指用个人电脑登录网站或APP。 个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机
Swiper(Swipermaster)是目前应用较广泛的移动端网页触摸内容滑动js插件。一些轮播图切换功能同时也适用于PC端。近期手上一个项目网站的首页轮播图
一个简单的移动端卡片滑动轮播组件,适用于Vue2.xc-swipe2.0全新归来。重写了全部的代码,更靠谱的质量,更优秀的性能EnglishDocument安装
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下api.jsimportaxiosfrom'