炫意html5
最早CSS3和HTML5移动技术网站之一

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>
<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 中运行体验整个登录流程。

回答

炫意HTML5 » uni-app 中保持用户登录状态

Java基础教程Android基础教程