uni-app 中保持用户登录状态
在应用中保持登录状态是一个应用常见的需求,本文简单介绍下在 uni-app 中如何保存用户登录状态。
简介
uni-app 中不支持读写 cookie,所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。
在 uni-app 进行登录操作时,可以将需要校验的数据放在 uni.request 的 data 中,也可以在 header 里设置 token,使用 token 进行登录状态校验。
流程:首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应用再次进入仍然是已登录状态。
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>
附件为demo,可直接在 HBuilderX 中运行体验整个登录流程。
附件下载
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
java版spring cloud+spring boot+redis社交电子商务平台-SSO单点登录之OAuth2.0登录认证
之前写了很多关于spring cloud的文章,今天我们对OAuth2.0的整合方式做一下笔记,首先我从网上找了一些关于OAuth2.0的一些基础知识点,帮助大家回顾一下知识点: 一、oauth中的角色 client:调用资源服务器API的应用 Oauth 2.0 Provider:包括Authorization Server和Resource Server (1)Authorization Server:认证服务器,进行认证和授权 (2)Resource Server:资源服务器,保护受保护的资源 user:资源的拥有者 二、下面详细介绍一下Oauth 2.0 Provider Authorization Server: (1)AuthorizationEndpoint:进行授权的服务,Default URL: /oauth/authorize (2)TokenEndpoint:获取token的服务,Default URL: /oauth/token Resource Server: OAuth2AuthenticationProcessingFilter:给带有访问令牌的请求加载认...
- 下一篇
python调用阿里云产品接口
因为有些人使用爬虫访问web,浪费服务器资源不说还会影响正常用户,所以需要限制爬虫ip,本可以通过nginx或者防火墙限制,但需要重新编译nginx,开启防火墙怕又不知道会影响到哪些程序,所以 想用/etc/hosts.deny文件限制某些ip访问web的,于是配置了http:124.90.. 发现根本没用,但我之前使用该文件是可以限制ip ssh的,为什么现在不能限制http了呢,于是上网搜了下,发现如下内容: hosts.allow和hosts.deny规则的执行者为TCP wrappers,对应守护进程为tcpd;而tcpd执行依赖于程序使用了libwrap库。 也就是说:hosts.allow和hosts.deny支持且只支持使用了libwrap库的服务。 那如何查看程序是否使用libwarp?有俩种方法: 方法一、查看hosts_access字段串 查看应用程序是否支持 wrapper,可以使用 strings 程序然后 grep 字符串 hosts_access:方法二、使用ldd, ldd /usr/sbin/sshd | grep libwrap 查测发现使用xinet...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装Docker,最新的服务器搭配容器使用
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7安装Docker,走上虚拟化容器引擎之路