How to manage user login status in uni-app

 

Introduction

Uni-app does not support reading and writing cookies, so you can't judge whether it is a login state by reading cookies like traditional applications.

During the login operation in uni-app, you can put the data to be verified in the data of uni.request, or you can set a token in the header and use the token to verify the login status.

Process: The homepage is not logged in => log in => homepage status change => exit the application and enter again is still logged in.

vuex

Use vuex to manage login status and save user information, below is part of the code.

const store = new Vuex.Store ({   
    state: {   
        uerInfo: {},   
        hasLogin: false   
    },   
    mutations: {   
        login (state, provider) { // change login state   
            state.hasLogin = true   
            state.uerInfo.token = provider. token   
            state.uerInfo.userName = provider.user_name   
            uni.setStorage ({ // Save user information in local   
                key: ' uerInfo ' ,   
                data: provider    
            })  
        },  
        logout(state) {//退出登录  
            state.hasLogin = false  
            state.uerInfo = {}  
            uni.removeStorage({  
                key: 'uerInfo'  
            })  
        }  
    }  
})

log in

After entering the username and password in login.vue (login page), call uni.request to log in. After successful login, call vuex method to change the login status of the application.

<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 ) { // After successful login Change the status of vuex and log out of the login page   
                            this .login (e.data)   
                            uni.navigateBack ()   
                        }   
                    }   
                })   
            },  
            ...mapMutations(['login'])  
        }  
    }  
</script>

Change homepage status

Use hasLogin saved in vuex to judge whether it is the login status, so as to display different content.

<template>   
    <view class = " page " >   
        <view v- if = " ! hasLogin " > Now is not logged in, click the button to log in </ view>   
        <view v- else > is now logged in, your user The id is: {{uerInfo.userName}} </ view>   
        <button type = " primary " @ click = " bindLogin " > {{hasLogin? ' Logout ' : ' Login ' }} </ 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>

Enter the app again

In App.vue, determine whether the user saves the user information "uerInfo", if it is saved, it is considered to be the logged-in state, and if it is not saved, it is the unlogged state.

After getting the user information in App.vue, you need to change the status of vuex synchronously, so that all pages can share the login status and user information.

<script>   
    import {   
        mapMutations   
    } from  ' vuex ' ;   
    export default {   
        onLaunch: function () {   
            uni.getStorage ({ // Get local user information saved   
                key: ' uerInfo ' ,   
                success: (res) => {  
                     this .login (res.data);   
                    uni.request ({ // Check and refresh the validity time of the token again   
                        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>

Here is a demo. In my code cloud , you can take a look down if you want, and you can run