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动态加载二
Aug 22 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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
中东人咖啡哲学
2021/03/03 咖啡文化
PHP脚本的10个技巧(5)
2006/10/09 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
Three.js基础部分学习
2017/01/08 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
利用python实现数据分析
2017/01/11 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python 调用c语言函数的方法
2017/09/29 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
优秀村官事迹材料
2014/01/10 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
公证书
2019/04/17 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js
Python实现信息管理系统
2022/06/05 Python