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 中運作體驗整個登入流程。

附件下載下傳