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