在應用中保持登錄狀態是一個應用常見的需求，本文簡單介紹下在 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>