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 登陆界面了。