uni-app 前後端實戰課 - 《悅讀》學習筆記：【封裝全局登錄檢查函數並部署】小程序開發實例教程2/

接上一篇

1、在 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];
}

參數說明

backpage, backtype 2個參數分別代表：
backpage : 登錄後返回的頁面
backtype : 打開頁面的類型[1 : redirectTo 2 : switchTab]

返回值說明

已經登錄返回數組 [用戶 id, 用戶隨機碼, 用戶暱稱, 用戶表情]

2、創建 login 頁面

並寫個函數打印傳遞的變量
login 頁面作爲登錄過度頁面，多端登錄都通過此頁面完成!

3、在頁面中應用登錄檢查函數，如 write.vue

<script>
    var loginRes;
    export default {
        data() {
            return {

            }
        },
        onLoad: function() {
            loginRes = this.checkLogin('../my/my', '2');
            if (!loginRes) {
                return;
            }
        }
    }
</script>

return 或終止函數運行哦！

把write頁面和my頁面都加上這個代碼

調試

完成之後。可以調試一下。看是否報錯。是否有結果

代碼：

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
// 封裝全局登錄函數
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];
}
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

 

login.vue

<template>
	<view>
		longin...
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad:function(options){
			console.log(options);
		}
	}
</script>

<style>

</style>

write.vue

<template>
	<view>
		write...
	</view>
</template>

<script>
	var loginRes;
	export default {
		data() {
			return {

			}
		},
		onLoad: function() {
			loginRes = this.checkLogin('../write/write', '2');
			if (!loginRes) {
				return;
			}
		}
	}
</script>

<style>

</style>

my.vue

<template>
	<view>
		my...
	</view>
</template>

<script>
	var loginRes;
	export default {
		data() {
			return {

			}
		},
		onLoad: function() {
			loginRes = this.checkLogin('../my/my', '2');
			if (!loginRes) {
				return;
			}
		}
	}
</script>

<style>

</style>