基于vue的uni-app框架之vuex+storage登录

15 篇文章 0 订阅
13 篇文章 0 订阅

根据vuex全局状态管理+es6本地存储实现登录缓存以及token状态拦截

vuex--

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        hasLogin: false,
        token: false,
        userInfo: {},
    },
    mutations: {

        //登录
        login(state, provider) {
            state.hasLogin = true;
            state.userInfo = provider.user;
            state.token = provider.token;
            uni.setStorage({//缓存用户登陆状态
                key: 'userInfo',
                data: provider  
            })
        },

        //注销
        logout(state) {
            state.hasLogin = false;
            state.token = false;
            state.userInfo = {};
            uni.removeStorage({
                key: 'userInfo'
            })
        }
    },
    actions: {
    
    }
})

export default store

login.vue--验证码登录和账号密码登录,请求接口函数是 根据uni-app的request封装好的

async toLogin(){
            if (this.islogin) {
                // 验证码登录
                if (!this.isPhone()) {
                    this.$api.msg("手机号码错误");
                    return;
                }
                let data = {
                    phone:this.phone,
                    code:this.checknum,
                    verificationCode_key:this.key,
                    type:2
                }
                uni.showLoading({ title: '登录中...', mask: true });
                // 请求登录
                let [err,res] = await this.$http.post('/user/login',data);
                // 登录失败
                if (!this.$http.errorCheck(err,res)){
                    uni.hideLoading();
                    return false;
                }
                // 登录成功 保存状态
                if (res.data.code == 200000) {
                    // 调用vuex方法
                    this.login(res.data.data);
                    uni.hideLoading();
                    this.$api.msg(res.data.message);
                    // 返回上一步
                    setTimeout(()=>{
                        uni.navigateBack({ delta: 1 });
                    },300)
                }else{
                    uni.hideLoading();
                    this.$api.msg(res.data.message);
                }
            }else{
                if (!this.isPhone1()) {
                    this.$api.msg("手机号码错误");
                    return;
                }
                let Md5newPwd = md5('Shou'+this.password+'MAI__');
                let data1 = {
                    phone:this.username,
                    password:Md5newPwd,
                    type:1
                }
                // 账号密码登录
                uni.showLoading({ title: '登录中...', mask: true });
                // 请求登录
                let [err,res] = await this.$http.post('/user/login',data1);
                // 登录失败
                if (!this.$http.errorCheck(err,res)){
                    uni.hideLoading();
                    return false;
                }
                // 登录成功 保存状态
                if (res.data.code == 200000) {
                    // 调用vuex方法
                    this.login(res.data.data);
                    uni.hideLoading();
                    this.$api.msg(res.data.message);
                    // 返回上一步
                    setTimeout(()=>{
                        uni.navigateBack({ delta: 1 });
                    },300)
                }else{
                    uni.hideLoading();
                    this.$api.msg(res.data.message);
                }
            }
        }

然后在app.vue里 uni-app的onLaunch 生命周期 判断缓存中是否有vuex存储的登录信息,如果存在,调用this.login()

onLaunch: function() {
        // 用户状态保存--共享状态和用户信息
        //获得保存在本地的用户信息
        uni.getStorage({
            key: 'userInfo',  
            success:(res) => {
                console.log(res.data)
                this.login(res.data);
            }  
        });
    },

  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值