Neil_HL
Neil_HL
  • 发布:2019-03-06 16:53
  • 更新:2019-04-26 01:14
  • 阅读:3914

uni-app 中保持用户登录状态

分类: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 中运行体验整个登录流程。

14 关注 分享
Trust UserX 352489099@qq.com 1185079673@qq.com Geeker banro 331244921@qq.com admin@iwuye.com 秋天无风 lobtao 珍惜是福 abovesky@qq.com ppanda 下雨了

要回复文章请先登录注册

1750352431@qq.com

1750352431@qq.com

回复 1750352431@qq.com:
devServe的 host 还改成 0.0.0.0 ,cookie才可以生效
2019-04-26 01:14
1750352431@qq.com

1750352431@qq.com

在uniapp调试 h5 时,本地开启devServe反向代理接口,为了保持登录态cookie,但是uni.request是无法设置cookie的,可以通过document.cookie进行设置,但是务必在生产环境移除,登录cookie应该是服务器设置的。
2019-04-26 00:02
Neil_HL

Neil_HL (作者)

回复 koncoo_skyniz:
示例里token就是放在header里的
2019-03-18 12:00
lovnie

lovnie

回复 lovnie:
看错了 是在App.vue里写的启动只调用一次
2019-03-16 16:55
lovnie

lovnie

请问登录成功之后,每次进入页面都要校验并刷新token的有效时间 吗? 而且都要 this.login(res.data); 这样是不是太频繁了
2019-03-16 16:51
1181102955@qq.com

1181102955@qq.com

回复 1185079673@qq.com:
箭头函数会改变this的指向
2019-03-16 16:27
koncoo_skyniz

koncoo_skyniz

怎么把token放到header中?
2019-03-16 16:23
Neil_HL

Neil_HL (作者)

回复 1185079673@qq.com:
百度 es6 箭头函数
2019-03-14 15:46
1185079673@qq.com

1185079673@qq.com

找到问题了,你这里是success: (e) => {},我写的是success:function(e),这个为什么不可以,能解释一下吗
2019-03-13 22:33
1185079673@qq.com

1185079673@qq.com

this.login(e.data) 我用你这个都不知道试了几遍了,这个根本没生效啊,直接报错,没成功调用 vuex 的方法
2019-03-13 22:23