vue使用localStorage保存登录信息 适用于移动端、PC端
作者:haeasringnar 时间:2024-04-30 08:46:25
众所周知,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)
}
来源:https://blog.csdn.net/haeasringnar/article/details/82925031
标签:vue,localStorage,保存信息
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
一文轻松掌握python语言命名规范规则
2023-03-23 02:11:43
浅谈vue单一组件下动态修改数据时的全部重渲染
2024-04-27 15:51:55
Golang-如何判断一个 interface{} 的值是否为 nil
2024-02-17 10:08:10
![](https://img.aspxhome.com/file/2023/7/107307_0s.jpg)
Python3.6安装及引入Requests库的实现方法
2022-06-12 16:55:46
![](https://img.aspxhome.com/file/2023/4/120644_0s.jpg)
Javascript学习笔记之数组的遍历和 length 属性
2024-04-18 10:53:43
python3中的类继承你真的了解吗
2021-06-18 11:23:53
Oracle数据库按时间进行分组统计数据的方法
2023-07-14 13:52:56
Python Numpy 自然数填充数组的实现
2023-12-18 16:51:37
python的pygal模块绘制反正切函数图像方法
2021-08-01 18:48:21
![](https://img.aspxhome.com/file/2023/1/84111_0s.png)
加快Firefox 3.5启动速度的方法
2009-07-16 15:22:00
ECharts框架分段视觉映射在移动端适配
2024-04-28 09:53:49
![](https://img.aspxhome.com/file/2023/0/132700_0s.png)
PHP延迟静态绑定使用方法实例解析
2024-06-05 15:41:45
python程序 线程队列queue使用方法解析
2021-11-16 18:43:02
C# 连接SQL数据库的方法及常用连接字符串
2024-01-16 21:49:47
mysql数据库创建账号、授权、数据导出、导入操作示例
2024-01-26 06:44:42
sql索引失效的情况以及超详细解决方法
2024-01-21 09:25:30
![](https://img.aspxhome.com/file/2023/0/92750_0s.png)
Python学习之文件的创建与写入详解
2021-03-07 09:27:06
![](https://img.aspxhome.com/file/2023/9/110039_0s.png)
pycharm 中mark directory as exclude的用法详解
2021-02-27 05:24:07
python中reduce()函数的使用方法示例
2021-08-09 12:32:53
![](https://img.aspxhome.com/file/2023/9/117969_0s.png)
22个HTML5的初级技巧
2010-12-17 12:39:00
![](https://img.aspxhome.com/file/UploadPic/201012/17/01-40s.jpg)