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,在我的碼雲里，需要的話可以down下來看看，能跑