uniapp app端登录

由于自己很菜，编辑一下记录写代码过程。原文链接在文末（侵删），可以去原文下载demo

在应用中保持登录状态是一个应用常见的需求，本文简单介绍下在 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'  })  }  }
})

<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>

uni-app 中保持用户登录状态 - DCloud问答uni-app 中保持用户登录状态 - 在应用中保持登录状态是一个应用常见的需求，本文简单介绍下在 uni-app 中如何保存用户登录状态。简介uni-app 中不支持读写 cookie，所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。在 uni-app 进行...https://ask.dcloud.net.cn/article/35661demo:DAccount Service