uni-app 进阶之 https 请求方式 / 状态管理【day11】

作者：黎燃

2022 年 6 月 22 日
本文字数：1336 字
阅读完需：约 4 分钟

uni-app 进阶之 https 请求方式

传统 HTTP 存在安全问题：1.如果明文用于通信，则内容可能被窃听；2.如果未验证通信方的身份，通信方的身份可能被伪装；3.无法证明消息的完整性，消息可能被篡改。为了解决安全通信问题，HTTPS 应运而生。事实上，HTTPS 并不是一种新的协议。相反，它站在 HTTP 的肩膀上，让 HTTP 首先与 SSL（安全套接字层）通信，然后与 SSL 和 TCP 通信。也就是说，HTTPS 使用隧道进行通信。通过使用 SSL，HTTPS 具有加密（防窃听）、身份验证（防欺骗）和完整性保护（防篡改）。

HTTP plus 加密、身份验证机制和完整性保护是 HTTPS。重要的是要知道 HTTPS 不是应用层的新协议。只有 HTTP 通信接口部分被 SSL 或 TLS 协议替换。换句话说，所谓的 HTTPS 实际上是 SSL 协议外壳中的 HTTP。

非对称密钥加密

每个人都可以获得公钥。通信发送方获得接收方的公钥后，可以使用该公钥进行加密。接收方接收到通信内容后，可以使用私钥进行解密。除了加密之外，还可以使用非对称密钥进行签名。由于私钥无法被他人获取，通信发送方使用其私钥进行签名，通信接收方使用发送方的公钥对签名进行解密，从而可以判断签名是否正确。

SSL 为完整性保护提供消息摘要功能。HTTP 还提供 MD5 消息摘要功能，但不安全。例如，如果消息内容被篡改，同时重新计算 MD5 值，则通信接收方不知道该篡改。HTTPS 的消息摘要功能是安全的，因为它结合了加密和身份验证。想象一下，在加密的消息被篡改后，很难重新计算消息摘要，因为无法轻松获取明文。

条件编译的代码块源码

"#ifdef": {        "body": [            "<!-- #ifdef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} -->",            "$0",            "<!-- #endif -->"        ],        "prefix": "ifdef",        "project": "uni-app",        "scope": "source.vue.html"    },    "#ifndef": {        "body": [            "<!-- #ifndef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} -->",            "$0",            "<!-- #endif -->"        ],        "prefix": "ifndef",        "project": "uni-app",        "scope": "source.vue.html"    },

复制代码

系统帮助我们预设四个代码块文件。单击菜单栏-工具-代码块设置查看它们：HTML 代码块（HTML.json）、CSS 代码块（CSS.json）、JavaScript 代码块（JavaScript.json）和 Vue 代码块（Vue.json）。

添加状态管理 vuex

下拉刷新

数据请求完成之后停止下拉刷新

export default {    data: {        text: 'uni-app'    },    onShow: function (options) {      this.loadData();    },    onPullDownRefresh() {      this.loadData()    }   methods:{       loadData() {                this.$http('/data', {}, 'get').then((res) => {                    uni.stopPullDownRefresh();                    if (res.status) {                        this.activityList = res.data                    }                })            }      }}