美文网首页uin-appuni-app交流圈uni-app
uni-app实战-封装全局登录检查函数并部署

uni-app实战-封装全局登录检查函数并部署

作者: 瑟闻风倾 | 来源:发表于2019-06-05 10:14 被阅读0次

    通用说明:对于一个新闻、阅读、论坛、购物等应用,浏览页面并不需要用户进行登录和注册;但是在编辑、评论等页面需要用户先登录。故需要封装一个全局的登录检查函数,在对应的页面进行调用。检查判断是否已登录,已登录则可继续操作;未登录则跳转至登录页先完成登录,然后再回到之前页面。

    1. 在 main.js 中封装全局登录函数

     //封装全局登录检查函数:backpage为登录后返回的页面;backtype为打开页面的类型[1 : redirectTo 2 : switchTab]
     //3种页面跳转方式:NavigationTo(直接打开新页面),RedirectTo(覆盖原页面后打开新页面),SwitchTo(切换顶部导航的方式来切换页面)
    Vue.prototype.checkLogin = function(backpage, backtype){
        var SUID  = uni.getStorageSync('SUID');//本地持久化存储
        var SRAND = uni.getStorageSync('SRAND');
        var SNAME = uni.getStorageSync('SNAME');
        var SFACE = uni.getStorageSync('SFACE');
        if(SUID == '' || SRAND == '' || SFACE == ''){
            uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
            return false;
        }
        return [SUID, SRAND, SNAME, SFACE];//已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情],以供后续使用用户信息
    }
    //定义全局api接口地址和token
    var APITOKEN = 'api2019'
    Vue.prototype.apiServer = 'http://localhost/index.php?token=' + APITOKEN + '&c=';
    

    备注:uni-app基于vue.js,vue对象是uni-app中一个关键的对象。main.js文件可定义全局函数和变量(如全局api接口地址),通过vue对象原型拓展来定义全局函数,对应页面通过this指向来调用main.js文件定义的全局函数。

    2. 创建 login 页面

    <template>
        <view>
            
        </view>
    </template>
    
    <script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        },
        onLoad:function(options){
            console.log(options);
        }
    }
    </script>
    
    <style>
    
    </style>
    
    

    备注:login 页面作为登录过度页面,多端登录都通过此页面完成。

    3. 在对应页面中调用登录检查函数,如 write.vue

    <script>
    export default {
        data() {
            return {
                
            };
        },
        onLoad : function() {
            var loginRes = this.checkLogin('../my/my', '2');
            if(!loginRes){return false;}
        }
    }
    </script>
    

    相关文章

      网友评论

        本文标题:uni-app实战-封装全局登录检查函数并部署

        本文链接:https://www.haomeiwen.com/subject/kqhjxctx.html