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

?

posted @ 2019-03-29 22:34 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的main.js中封装全局登录函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。