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 页面作为登录过度页面，多端登录都通过此页面完成!






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

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

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

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


return 或终止函数运行哦！
执行结果如下：
main.js中封装全局登录函数_main.js_02
很显然，跳转至 login.vue 登陆界面了。