在应用中保持登录状态是一个应用常见的需求,本文简单介绍下在 uni-app 中如何保存用户登录状态。
### 简介
uni-app 中不支持读写 cookie,所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。
在 uni-app 进行登录操作时,可以将需要校验的数据放在 uni.request 的 data 中,也可以在 header 里设置 token,使用 token 进行登录状态校验。
流程:首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应用再次进入仍然是已登录状态。
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vaW1nL2xvZ2luLnBuZw?x-oss-process=image/format,png)
### vuex
使用 vuex 进行管理登陆状态和保存用户信息,下面是部分代码。
```
const store = new Vuex.Store({
state: {
uerInfo: {},
hasLogin: false
},
mutations: {
login(state, provider) {//改变登录状态
state.hasLogin = true
state.uerInfo.token = provider.token
state.uerInfo.userName = provider.user_name
uni.setStorage({//将用户信息保存在本地
key: 'uerInfo',
data: provider
})
},
logout(state) {//退出登录
state.hasLogin = false
state.uerInfo = {}
uni.removeStorage({
key: 'uerInfo'
})
}
}
})
```
### 登录
在 login.vue(登录页面)输入用户名密码后,调用 uni.request 进行登录,登录成功后调用 vuex 的方法改变应用的登陆状态。
复制代码
```
<script>
import {
mapMutations
} from 'vuex';
export default {
methods: {
bindLogin(e) {
let name = e.detail.value.nameValue,
password = e.detail.value.passwordValue;
uni.request({
url: `${this.$serverUrl}/login.php`,
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: {
"username": name,
"password": password
},
method: "POST",
success: (e) => {
if (e.data.code === 0) {//登录成功后改变vuex的状态,并退出登录页面
this.login(e.data)
uni.navigateBack()
}
}
})
},
...mapMutations(['login'])
}
}
</script>
```
### 改变首页状态
通过 vuex 中保存的 hasLogin 判断是否是登录状态,从而显示不同的内容。
```
<template>
<view class="page">
<view v-if="!hasLogin">现在是未登录状态,点击按钮进行登录</view>
<view v-else>现在是登录状态,您的用户id是:{{uerInfo.userName}}</view>
<button type="primary" @click="bindLogin">{{hasLogin ? '退出登录' : '登录'}}</button>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: mapState(['hasLogin','uerInfo']),
methods: {
...mapMutations(['logout']),
bindLogin() {
if (this.hasLogin) {
this.logout()
} else {
uni.navigateTo({
url: '/pages/login/login'
})
}
}
}
}
</script>
```
### 再次进入应用
在 App.vue 中判断用户是否保存用户信息 "uerInfo",如果保存则认为是登录状态,未保存则为未登录状态。
App.vue 中得到用户信息后需要同步改变 vuex 的状态,使所有页面都能共享登陆状态与用户信息。
复制代码
```
<script>
import {
mapMutations
} from 'vuex';
export default {
onLaunch: function () {
uni.getStorage({//获得保存在本地的用户信息
key: 'uerInfo',
success:(res) => {
this.login(res.data);
uni.request({// 再次校验并刷新token的有效时间
url: `${this.$serverUrl}/auth.php`,
header: {
"Content-Type": "application/x-www-form-urlencoded",
"Token":res.data.token
},
data: {
"username":res.data.user_name
},
method: "POST",
success: (e) => {
if (e.statusCode === 200 && e.data.code === 0) {
this.login(e.data);
}
}
})
}
});
},
methods: {
...mapMutations(['login'])
}
}
</script>
```
- 空白目录
- thinkcmf的权限管理
- thinkcmf+unicmf添加页面
- Thinkphp5做后台 Uni-app做前台解决跨域问题
- 组件
- h5跨域-uniapp
- thinkphp5 auth 教程
- thinkphp5Auth类
- uniapp添加与编辑的差别
- 常见的请求方式
- uni 单选回显数据_uniapp 页面跳转传值和接收
- uni-app 单选/多选/滑动 demo
- 关于uniapp checkbox多选框如何传值传数据
- uniApp 多选框checkbox ,判断是否选中
- uniapp添加复选框和获取复选框的值
- uni-app中全选多选单选
- uniapp多选框CheckBox 数据接收
- uniapp下拉列表单选框复选框实战demo(编辑或详情页)
- uni-data-CheckBox-OK
- js 字符串数组转换成数字数组
- js把字符串转为数组对象
- js中数组对象字符串的相互转换
- JS怎么把字符串数组转换成整型数组
- 小程序开发
- tp5.1跨域请求
- uniapp-h5跨域
- 新增
- order
- uni-app中调取接口的三种方式与封装uni.request()
- uView-checkbox
- 给u-view的u-select赋值
- uView-下拉框、复选框、单选框 数据发送及接收
- CURD操作
- thinkphp5.1增删改查
- TP5.1添加数据成功之后返回自增主键id
- Thinkphp实战之Request默认值except only 以及过滤参
- uni-app跨域解决方案
- thinkphp5.1+uni-app接口开发中跨域问题解决方案
- tp6 + uniapp 前后端跨域解决方案
- uniapp-token相关
- uniapp request请求封装包含token兼容多端,简单易用
- CORS.php
- ThinkPHP6 API开发前后端分离用户信息保存在后端的方法
- thinkphp的jwt(JSON Web Token)身份验证
- thinkphp6增删改查
- PHP模拟GET,POST请求
- php模拟get、post发送请求的6种方法
- thinkphp6
- uniapp封装网络请求
- thinkphp6搭建后端api接口jwt-auth
- uniapp实现APP微信登录流程
- [uni-app] 中保持用户登录状态
- 详解vue中localStorage的使用方法
- vue 实现通过vuex 存储值 在不同界面使用
- dispatch:异步操作,数据提交至 actions ,可用于向后台提交数据
- ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作
- tp6错误集
- TP6 模型插入/添加数据,自动插入时间(自动时间戳)
- 手机不开机维修思路
- thinkphp6解决vue跨域问题
- 从0基础获取短视频去水印解析接口制作
- thinkphp5 删除缓存
- thinkPHP,怎么把json文件里面的数据导入数据库
- 数字转字符php
- php – 直接用curl下载远程文件
- thinkphp – 直接用curl下载远程文件
- apiAdmin安装
- echart
- thinkphp开发小程序推广分享带参数二维码生成
- php同比增加函数
- PHP获取同比上周、上一个月,上一个季度,去年时间区间
- “前3秒”金句100例,赶紧收藏起来!
- PHP配合微信公众号生成推广二维码
- thinkphp5+php微信公众号二维码扫码关注推广二维码事件实现
- 获取当前时间上一周的开始时间和结束时间
- TP6 查找指定工作日
- PHP 获取当天、近一周、本周、上月、本月、本季度、上季度时间方法大全
- php获取今日、昨日、本周、本月 日期方法
- Tp5+mysql按年季度月周日小时查询时无数据的时间段补0方法
- mysql按天统计的时候,该天没有数据也要统计为0
- 列出一星期的日期 无数据补0
- thinkphp6本周 上周 周一 周末日期
- 补全日期 无数据补0
- php+pv统计代码实现,Laravel 10 行代码实现简单的网站 pv uv 统计
- 通过API获取ip地址以及城市和运营商
- 获取访客信息
- 13行代码实现微信小程序设置概率触发激励视频阅读文章
- uniapp 微信小程序 获取场景值和场景值个性化参数
- 微信小程序分享小程序码的生成(带参数)以及参数的获取
- 小程序推广分享带参数二维码生成
- uniapp微信小程序生成对应页面二维码
- uniapp获取当前页面url
- uniapp微信小程序--微信登录
- 微信小程序,生成小程序码中scene参数的存放和获取问题
- uni-app 微信小程序生成二维码带参数
- uni-app 微信小程序如何把图片保存到本地相册?
- thinkPHP5使用assign()传递富文本,前端解析成HTML标签
- tp6解析编辑器里面的html标签原样输出
- PHP判断url链接是否被百度收录
- 微擎安装模块时提示 Failed to connect to we7.rewlkj.com port 80: Timed out
- 小程序码生成
- thinkphp开发小程序推广分享带参数二维码生成0
- tp3.2伪静态
- apiadmin安装教程-2022.8更新
- autojs事件代码
- uuuu
- thinkphp6: API 多版本控制