uni-app 前后端实战课 - 《悦读》学习笔记:【封装全局登录检查函数并部署】小程序开发实例教程2/
2023-09-14 09:04:08 时间
接上一篇
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 页面作为登录过度页面,多端登录都通过此页面完成!
![](https://img-blog.csdnimg.cn/20200613114231792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5,size_16,color_FFFFFF,t_70)
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>
相关文章
- APP性能测试工具——GT 使用方法
- android app 退出功能,Android 完美退出 App (Exit)
- App Cleaner & Uninstaller Pro for Mac(苹果应用程序清理卸载软件)v7.8.3中文版
- windows也可以将ipa上传到app store的构建版本
- uni-app 安卓APP开发记录
- 从零开发一款相机APP 第六篇: Camera2相机 打开功能实现
- 软件测试|App自动化之Appium工作原理
- 如何用苹果app完成ipa安装
- APP系统架构设计初探(一)
- APP Uploader-iOS APP上架到App Store的辅助工具
- 网购App购物车点击动画实现详解编程语言
- 基于MSSQL的手机APP编程实践(mssql编程app)
- 手机App连接网站MySQL数据库实现跨平台通讯(app连接网站mysql)
- App无缝连接MySQL一种全新的解放方式(app直连mysql)
- 应用mysql带来的巨大便利(app用mysql好处)
- App测试技术利用Mysql助力质量保障(app测试mysql)
- App中数据库优势之MySQL(app数据库mysql)
- App应用提交到MySQL中的实践与探索(app提交mysql)
- MySQL在App开发中的应用(app开发mysql)
- APP互联网化MySQL驱动开拓前沿(app和mysql的关系)
- MYSQL数据库助力下载电影App,高效运转数据管理系统(MYSQL下载电影app)
- App与Oracle融合,拥抱数据驱动未来(app与oracle)
- 百度成立小度蓝牙联盟,DMA+小度App打造蓝牙语音风口
- 百度APP上线百度搜索购物返现 确认收货后15天到账
- android实现通知栏下载更新app示例