[uni-app] 中保持用户登录状态

今天药忘吃喽~ 2023-06-07 08:12 52阅读 0赞

在应用中保持登录状态是一个应用常见的需求,本文简单介绍下在 uni-app 中如何保存用户登录状态。

简介

uni-app 中不支持读写 cookie,所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。

在 uni-app 进行登录操作时,可以将需要校验的数据放在 uni.request 的 data 中,也可以在 header 里设置 token,使用 token 进行登录状态校验。

流程:首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应用再次进入仍然是已登录状态。

format_png

vuex

使用 vuex 进行管理登陆状态和保存用户信息,下面是部分代码。

  1. 复制代码const store = new Vuex.Store({
  2. state: {
  3. uerInfo: {},
  4. hasLogin: false
  5. },
  6. mutations: {
  7. login(state, provider) {//改变登录状态
  8. state.hasLogin = true
  9. state.uerInfo.token = provider.token
  10. state.uerInfo.userName = provider.user_name
  11. uni.setStorage({//将用户信息保存在本地
  12. key: 'uerInfo',
  13. data: provider
  14. })
  15. },
  16. logout(state) {//退出登录
  17. state.hasLogin = false
  18. state.uerInfo = {}
  19. uni.removeStorage({
  20. key: 'uerInfo'
  21. })
  22. }
  23. }
  24. })

登录

在 login.vue(登录页面)输入用户名密码后,调用 uni.request 进行登录,登录成功后调用 vuex 的方法改变应用的登陆状态。

  1. 复制代码<script>
  2. import {
  3. mapMutations
  4. } from 'vuex';
  5. export default {
  6. methods: {
  7. bindLogin(e) {
  8. let name = e.detail.value.nameValue,
  9. password = e.detail.value.passwordValue;
  10. uni.request({
  11. url: `${this.$serverUrl}/login.php`,
  12. header: {
  13. "Content-Type": "application/x-www-form-urlencoded"
  14. },
  15. data: {
  16. "username": name,
  17. "password": password
  18. },
  19. method: "POST",
  20. success: (e) => {
  21. if (e.data.code === 0) {//登录成功后改变vuex的状态,并退出登录页面
  22. this.login(e.data)
  23. uni.navigateBack()
  24. }
  25. }
  26. })
  27. },
  28. ...mapMutations(['login'])
  29. }
  30. }
  31. </script>

改变首页状态

通过 vuex 中保存的 hasLogin 判断是否是登录状态,从而显示不同的内容。

  1. 复制代码<template>
  2. <view class="page">
  3. <view v-if="!hasLogin">现在是未登录状态,点击按钮进行登录</view>
  4. <view v-else>现在是登录状态,您的用户id是:{
  5. {uerInfo.userName}}</view>
  6. <button type="primary" @click="bindLogin">{
  7. {hasLogin ? '退出登录' : '登录'}}</button>
  8. </view>
  9. </template>
  10. <script>
  11. import {
  12. mapState,
  13. mapMutations
  14. } from 'vuex';
  15. export default {
  16. computed: mapState(['hasLogin','uerInfo']),
  17. methods: {
  18. ...mapMutations(['logout']),
  19. bindLogin() {
  20. if (this.hasLogin) {
  21. this.logout()
  22. } else {
  23. uni.navigateTo({
  24. url: '/pages/login/login'
  25. })
  26. }
  27. }
  28. }
  29. }
  30. </script>

再次进入应用

在 App.vue 中判断用户是否保存用户信息 “uerInfo”,如果保存则认为是登录状态,未保存则为未登录状态。

App.vue 中得到用户信息后需要同步改变 vuex 的状态,使所有页面都能共享登陆状态与用户信息。

  1. 复制代码<script>
  2. import {
  3. mapMutations
  4. } from 'vuex';
  5. export default {
  6. onLaunch: function () {
  7. uni.getStorage({//获得保存在本地的用户信息
  8. key: 'uerInfo',
  9. success:(res) => {
  10. this.login(res.data);
  11. uni.request({// 再次校验并刷新token的有效时间
  12. url: `${this.$serverUrl}/auth.php`,
  13. header: {
  14. "Content-Type": "application/x-www-form-urlencoded",
  15. "Token":res.data.token
  16. },
  17. data: {
  18. "username":res.data.user_name
  19. },
  20. method: "POST",
  21. success: (e) => {
  22. if (e.statusCode === 200 && e.data.code === 0) {
  23. this.login(e.data);
  24. }
  25. }
  26. })
  27. }
  28. });
  29. },
  30. methods: {
  31. ...mapMutations(['login'])
  32. }
  33. }
  34. </script>

附件为demo,可直接在 HBuilderX 中运行体验整个登录流程。

  • login.zip

发表评论

表情:
评论列表 (有 0 条评论,52人围观)

还没有评论,来说两句吧...

相关阅读