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 相关文章推荐
js使用eval解析json(js中使用json)
Jan 17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 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 保留字列表
2012/10/04 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python中JWT用户认证的实现
2020/05/18 Python
python实现马丁策略的实例详解
2021/01/15 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
在职证明范本
2015/06/15 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
PHP新手指南
2021/04/01 PHP
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP