vue使用localStorage保存登录信息 适用于移动端、PC端


Posted in Javascript onMay 27, 2019

众所周知,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)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
了解javascript中的Dom操作
May 27 #Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
深入浅出了解Node.js Streams
May 27 #Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 #Javascript
vue项目前端错误收集之sentry教程详解
May 27 #Javascript
You might like
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP小技巧之函数重载
2014/06/02 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
浅谈Django REST Framework限速
2017/12/12 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
django基础学习之send_mail功能
2019/08/07 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
如何基于python操作json文件获取内容
2019/12/24 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
高中自我鉴定
2013/12/20 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
商场消防演习方案
2014/02/12 职场文书
小学一年级学生评语
2014/04/22 职场文书
正科级干部考察材料
2014/05/29 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android