簡(jiǎn)介

uni-app 中不支持讀寫(xiě) cookie，所以不能如傳統(tǒng)的應(yīng)用那樣通過(guò)讀取 cookie 來(lái)判斷是否是登錄狀態(tài)展姐。

在 uni-app 進(jìn)行登錄操作時(shí)，可以將需要校驗(yàn)的數(shù)據(jù)放在 uni.request 的 data 中，也可以在 header 里設(shè)置 token，使用 token 進(jìn)行登錄狀態(tài)校驗(yàn)鞭铆。

流程：首頁(yè)為未登錄狀態(tài) => 進(jìn)行登錄 => 首頁(yè)狀態(tài)改變 => 退出應(yīng)用再次進(jìn)入仍然是已登錄狀態(tài)。

vuex

使用 vuex 進(jìn)行管理登陸狀態(tài)和保存用戶信息焦影，下面是部分代碼车遂。

const store = new Vuex.Store({  
    state: {  
        uerInfo: {},  
        hasLogin: false  
    },  
    mutations: {  
        login(state, provider) {//改變登錄狀態(tài)  
            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（登錄頁(yè)面）輸入用戶名密碼后，調(diào)用 uni.request 進(jìn)行登錄斯辰，登錄成功后調(diào)用 vuex 的方法改變應(yīng)用的登陸狀態(tài)舶担。

<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的狀態(tài)，并退出登錄頁(yè)面  
                            this.login(e.data)  
                            uni.navigateBack()  
                        }  
                    }  
                })  
            },  
            ...mapMutations(['login'])  
        }  
    }  
</script>

改變首頁(yè)狀態(tài)

通過(guò) vuex 中保存的 hasLogin 判斷是否是登錄狀態(tài)彬呻，從而顯示不同的內(nèi)容衣陶。

<template>  
    <view class="page">  
        <view v-if="!hasLogin">現(xiàn)在是未登錄狀態(tài)，點(diǎn)擊按鈕進(jìn)行登錄</view>  
        <view v-else>現(xiàn)在是登錄狀態(tài)闸氮，您的用戶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>

再次進(jìn)入應(yīng)用

在 App.vue 中判斷用戶是否保存用戶信息 "uerInfo"剪况，如果保存則認(rèn)為是登錄狀態(tài)，未保存則為未登錄狀態(tài)蒲跨。

App.vue 中得到用戶信息后需要同步改變 vuex 的狀態(tài)译断，使所有頁(yè)面都能共享登陸狀態(tài)與用戶信息。

<script>  
    import {  
        mapMutations  
    } from 'vuex';  
    export default {  
        onLaunch: function () {  
            uni.getStorage({//獲得保存在本地的用戶信息  
                key: 'uerInfo',  
                success:(res) => {  
                    this.login(res.data);  
                    uni.request({// 再次校驗(yàn)并刷新token的有效時(shí)間  
                        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>

感謝原創(chuàng)：https://www.cnblogs.com/fxwoniu/p/12721111.html