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

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

通过 vue 对象的原型扩展，可以扩展一个函数，这样这个函数就可以在
每一个界面通过类似指向对象的方式，去访问这个函数。

如下是 main.js 扩展的函数：

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];
}

uni.getStorageSync 采用同步的方式获取本地存储的四个变量。
分别是：

• SUID：用户id
• SRAND：用户随机码
• SNAME：用户名称
• SFACE：用户头像

如果四个变量为空值得话，就认为用户没有登录，则使用 uni.redirectTo 重定向的方式跳转到登录页，补充：uni.redirectTo 为 uni-app 中的两种跳转方式之一。

登录失败后返回 false，如果是已经登录了，则把需要获取的值返回回去；

参数说明

backpage, backtype 2个参数分别代表：

• backpage : 登录后返回的页面
• backtype : 打开页面的类型[1:redirectTo、2:switchTab]

返回值说明

已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]

2. 创建 login 页面

login 页面作为登录过度页面，多端登录都通过此页面完成!

<template>
    <view>
        {{backpage}}
        ---
        {{backtype}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                backpage:'',
                backtype:''
            };
        },
        onLoad:function(e){
            this.backpage = e.backpage;
            this.backtype = e.backtype;
        }

    }
</script>

<style>

</style>

3. 在页面中应用登录检查函数

我们通过界面触发校验登陆的函数，如 write.vue 界面。

点击上图中的 写作 将会触发验登陆的函数 checkLogin ，在这同时传递了两个参数，具体代码如下：

<script>
    export default {
    data() {
        return {

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

return 或终止函数运行哦！

执行结果如下：

很显然，跳转至 login.vue 登陆界面了。