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 相关文章推荐
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
chrome调试javascript详解
Oct 21 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
JS排序之快速排序详解
Apr 08 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
如何测量vue应用运行时的性能
Jun 21 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的类树(支持无限分类)
2006/10/09 PHP
php mail to 配置详解
2014/01/16 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python三级目录展示的实现方法
2016/09/28 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
浅谈django channels 路由误导
2020/05/28 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
建筑工程毕业生自我鉴定
2014/01/14 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
学习型党组织心得体会
2014/09/12 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android