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