Cómo administrar el estado de inicio de sesión del usuario en uni-app

 

Introduccion

Uni-app no ​​admite la lectura y escritura de cookies, por lo que no puede juzgar si es un estado de inicio de sesión leyendo cookies como las aplicaciones tradicionales.

Durante la operación de inicio de sesión en uni-app, puede poner los datos que se verificarán en los datos de uni.request, o puede establecer un token en el encabezado y usar el token para verificar el estado de inicio de sesión.

Proceso: la página de inicio no está conectada => iniciar sesión => cambio de estado de la página de inicio => salir de la aplicación e ingresar nuevamente todavía está conectado.

vuex

Use vuex para administrar el estado de inicio de sesión y guardar la información del usuario, a continuación se incluye parte del código.

const store = new Vuex.Store ({   
    state: {   
        uerInfo: {},   
        hasLogin: false   
    },   
    mutaciones: {   
        login (estado, proveedor) { // cambia el estado de inicio de sesión   
            state.hasLogin = true   
            state.uerInfo.token = proveedor. token   
            state.uerInfo.userName = provider.user_name   
            uni.setStorage ({ // Guardar la información del usuario en la 
                clave local   : ' uerInfo ' ,   
                datos: proveedor   
            })  
        },  
        cerrar sesión (estado) { // 退出 登录   
            state.hasLogin = false   
            state.uerInfo = {}   
            uni.removeStorage ({   
                clave: ' uerInfo '   
            })   
        }   
    }   
})

Iniciar sesión

Después de ingresar el nombre de usuario y la contraseña en login.vue (página de inicio de sesión), llame a uni.request para iniciar sesión. Después de iniciar sesión correctamente, llame al método vuex para cambiar el estado de inicio de sesión de la aplicación.

<script>   
    import {   
        mapMutations   
    } desde  ' vuex ' ;  
            valores predeterminados de 
    exportación {   
        métodos: {   bindLogin (e) {   
                let name = e.detail.value.nameValue,   
                    password = e.detail.value.passwordValue;  
                uni.request ({   
                    url: `$ { this . $ serverUrl} / login.php`,   
                    encabezado: {   
                        " Content-Type " : " application / x-www-form-urlencoded "  
                    },   
                    datos: {   
                        " nombre de usuario " : nombre,  
                         " contraseña " : contraseña   
                    },   
                    método: " POST " ,   
                    éxito: (e) => {  
                         if (e.data.code === 0 ) { // Después de iniciar sesión correctamente Cambie el estado de vuex y cierre la sesión de la página de inicio de sesión   
                            este .login (e.data)   
                            uni.navigateBack ()   
                        }   
                    }   
                })  
            },   
            ... mapMutations ([ ' login ' ])   
        }   
    }  
 </script>

Cambiar el estado de la página de inicio

Use hasLogin guardado en vuex para juzgar si se trata del estado de inicio de sesión, a fin de mostrar contenido diferente.

<template>   
    <view class = " page " >   
        <view v- if = " ! hasLogin " > Ahora no está conectado, haga clic en el botón para iniciar sesión </ view>   
        <view v- else > ahora está conectado, su usuario La identificación es: {{uerInfo.userName}} </ view>   
        <button type = " primary " @ click = " bindLogin " > {{hasLogin? ' Logout ' : ' Login ' }} </ button>   
    </ view>   
</ template>   
<script>  
    importar {   
        mapState,  
        mapMutations   
    } de  ' vuex ' ;  
    export default {   
        calculado: mapState ([ ' hasLogin ' , ' uerInfo ' ]),   
        métodos: {   
            ... mapMutations ([ ' logout ' ]),   
            bindLogin () {   
                if ( this .hasLogin) {  
                     this .logout ()   
                } else {   
                    uni.navigateTo ({   
                        url: ' / pages / login / login'   
                    })   
                }   
            }   
        }   
    }  
 </script>

Ingrese la aplicación nuevamente

En App.vue, determine si el usuario guarda la información de usuario "uerInfo", si se guarda, se considera que es un estado conectado, y si no se guarda, se desbloquea.

Después de obtener la información del usuario en App.vue, debe cambiar el estado de vuex sincrónicamente para que todas las páginas puedan compartir el estado de inicio de sesión y la información del usuario.

<script>   
    importar {   
        mapMutations   
    } desde  ' vuex ' ;   
    exportar por defecto {   
        onLaunch: function () {   
            uni.getStorage ({ // Obtener 
                clave guardada de información de usuario local   : ' uerInfo ' ,   
                éxito: (res) => {  
                     this .login (res.data);   
                    uni.request ({ // Comprueba y actualiza la hora válida del token nuevamente   
                        url: `$ { this . $ serverUrl} / auth.php`,  
                        encabezado: {   
                            " Content-Type " : " application / x-www-form-urlencoded " ,  
                             " Token " : res.data.token   
                        },   
                        datos: {   
                            " username " : res.data.user_name   
                        },   
                        método: " POST " ,   
                        éxito: (e) => {  
                             if (e.statusCode === 200 && e.data.código === 0 ) {  
                                este .login (e.data);  
                            }   
                        }   
                    })   
                }   
            });  
        },   
        métodos: {   
            ... mapMutations ([ ' login ' ])   
        }   
    }  
 </script>

Aquí hay una demostración. En mi nube de código , puede mirar hacia abajo si lo desea, y puede ejecutar