回顾
我们先来复习下 Cookie 的知识
定义
摘自维基百科
HTTP Cookie,简称 Cookie,是浏览网站时由网络服务器创建并由网页浏览器存放在用户计算机或其他设备的小文本文件。
结构
Cookie的基本结构包括
- 名称
- 取值
- 各种属性
属性
一条 Cookie 可能有 Domain
、Path
、Expires
、Max-Age
、Secure
、HttpOnly
等多种属性,如
HTTP/1.0 200 OK
Set-Cookie: LSID=DQAAAK…Eaem_vYg; Path=/accounts; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly
Set-Cookie: HSID=AYQEVn…DKrdst; Domain=.foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; HttpOnly
Set-Cookie: SSID=Ap4P…GTEq; Domain=foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure; HttpOnly
…
工作流程
- 客户端请求服务器时,服务器通过响应头中的
Set-Cookie
关键字告诉客户端需要保存的 Cookie 信息 - 客户端根据 Cookie 类型保存 Cookie 信息
- 下次请求时检查当前 Domain 和 Path 在本地是否有 Cookie 信息,如果有的话,通过请求头中的
Cookie
字段将 Cookie 信息告诉服务器
启发
既然 Cookie 的接收和发送都是通过 Header
实现,那我们也可以从这里入手。
先看接收部分,我们先用 PostMan 发送请求,看下返回的 Cookie,作为对照
可以看到,登录信息保存在了 loginUserName
和 token_pass
中
接下来,我们打印下用 httpRequest
发送登录请求的响应头
{
"content-type": "application/json;charset=UTF-8",
"date": "Wed, 27 Dec 2023 07:50:12 GMT",
"server": "Apache-Coyote/1.1",
"set-cookie": "token_pass_wanandroid_com=******; Domain=wanandroid.com; Expires=Fri, 26-Jan-2024 07:50:12 GMT; Path=/",
"transfer-encoding": "chunked"
}
好家伙,怎么只有 token_pass
,鸿蒙你让我说你什么好,怎么 Cookie 还少了
好在我发现 httpRequest
的 Response 中有一个单独的 Cookie 字段,打印下看看
www.wanandroid.com FALSE / FALSE 1706255412 loginUserName chaywong
www.wanandroid.com FALSE / FALSE 1706255412 token_pass xxxxxx
.wanandroid.com TRUE / FALSE 1706255412 loginUserName_wanandroid_com chaywong
.wanandroid.com TRUE / FALSE 1706255412 token_pass_wanandroid_com xxxxxx
#HttpOnly_www.wanandroid.com FALSE / TRUE 0 JSESSIONID CDF02AE9203F644EF8E44F8C444AD3B1
这次倒是基本全了,一个换行表示一条 Cookie,每一行通过空格隔开 Cookie 的属性,可是这每个属性是什么含义啊?
又是一顿翻文档,翻注释,也没找到每个字段的说明,看来只能硬着头皮猜了
先看第一行,wanandroid.com
应该是 Domain,/
应该是 Path,1706255412
应该是过期时间,loginUserName
这该是 Cookie name,chaywong
是我的用户名,所以这个应该是 Cookie value,剩下的两个 boolean 实在没法猜了,应该是 Secure 和 HttpOnly,但是没办法对应。
好在这两个属性并不重要,不影响主要功能。
有了服务器的 Cookie,我们还要把 Cookie 再发送给服务器,以表明身份,这就更简单了
直接在 httpRequest
的请求头中增加 Cookie
字段,格式为
name1=value1; name2=value2
实践
既然 Cookie 的接收和发送都没问题了,那我们就来实现一个鸿蒙上的 CookieJar!
为了少走弯路,实践部分我们直接参考 Android 上的有名的开源库 PersistentCookieJar,和 OkHttp 配合起来使用 Cookie 非常方便,我在 Compose 版的「玩 Android」 上用的也是这个方案。
首先定义 Cookie 对象,用来保存 Cookie 属性,OkHttp 中已经定义好了,我们直接拿来用
转成 TS 版本
/**
* Cookie 对象,参考 OkHttp 中 Cookie 结构
*/
export default class Cookie {
name: string = "";
value: string = "";
expiresAt: number = 0;
domain: string = "";
path: string = "";
httpOnly: boolean = false;
persistent: boolean = true;
matches(url: uri.URI): boolean {
let domainMatch = Cookie.domainMatch(url.host, this.domain);
if (!domainMatch) return false;
if (!Cookie.pathMatch(url, this.path)) return false;
return true;
}
createCookieKey(): string {
return `https://${this.domain}${this.path}|${this.name}`;
}
isExpired(): boolean {
let nowTime = Date.now() / 1000;
return this.expiresAt < nowTime;
}
}
有些属性我们暂时获取不到,可以先忽略。
接下来是解析 httpRequest
Response 中的 Cookie 信息
/**
* httpRequest 返回的 cookie 格式:
* ```
* www.wanandroid.com FALSE / FALSE 1706255412 loginUserName chaywong
* www.wanandroid.com FALSE / FALSE 1706255412 token_pass xxxxxx
* .wanandroid.com TRUE / FALSE 1706255412 loginUserName_wanandroid_com chaywong
* .wanandroid.com TRUE / FALSE 1706255412 token_pass_wanandroid_com xxxxxx
* #HttpOnly_www.wanandroid.com FALSE / TRUE 0 JSESSIONID CDF02AE9203F644EF8E44F8C444AD3B1
* ```
*/
static parseHttpRequestCookies(cookieString: string): Array<Cookie> {
if (!cookieString) return [];
let cookies: Array<Cookie> = [];
let lines = cookieString.split("\r\n");
lines.forEach((line) => {
let attrs = line.split("\t");
if (attrs.length !== 7 || !attrs[0]) return;
let cookie = new Cookie();
let domain = attrs[0];
if (domain.startsWith("#HttpOnly_")) {
domain = domain.substring("#HttpOnly_".length);
cookie.httpOnly = true;
}
cookie.domain = domain;
cookie.path = attrs[2];
cookie.expiresAt = parseInt(attrs[4]);
cookie.name = attrs[5];
cookie.value = attrs[6];
cookies.push(cookie);
})
return cookies;
}
接下来是设计 CookieJar
,实现 Cookie 的接收、发送功能,这里我们同样借鉴 OkHttp 的 CookieJar 接口,这几个接口刚好满足我们接收、发送、清除 Cookie 的能力。
转成 TS 版本
export default interface CookieJar {
init(): Promise<void>;
saveFromResponse(url: uri.URI, cookies: Array<Cookie>);
loadForRequest(url: uri.URI): Array<Cookie>;
clear();
}
增加了一个 init
异步方法主要是为了异步加载 KV 缓存。
接口定义好,接下来就是实现了。
这里主要通过内存和 Preference 双重缓存 Cookie 信息,逻辑并不复杂,我们直接实现 TS 版本
export default class PersistentCookieJar implements CookieJar {
private isInit = false;
private cache: HashMap<string, Cookie> = new HashMap();
private persistor: CookiePersistor;
constructor(context: Context) {
this.persistor = new KVCookiePersistor(context);
}
async init(): Promise<void> {
if (!this.isInit) {
let cookies = await this.persistor.loadAll();
cookies.forEach((cookie) => {
this.cache.set(cookie.createCookieKey(), cookie);
})
this.isInit = true;
}
return new Promise<void>((resolve, reject) => {
resolve();
})
}
saveFromResponse(url: uri.URI, cookies: Cookie[]) {
cookies.forEach((cookie) => {
this.cache.set(cookie.createCookieKey(), cookie);
})
this.persistor.saveAll(PersistentCookieJar.filterPersistentCookies(cookies));
}
private static filterPersistentCookies(cookies: Array<Cookie>): Array<Cookie> {
return cookies.filter((item) => {
return item.persistent;
})
}
loadForRequest(url: uri.URI): Cookie[] {
let cookiesToRemove: Array<Cookie> = [];
let validCookies: Array<Cookie> = [];
let iterator: IterableIterator<Cookie> = this.cache.values();
let result = iterator.next();
while (!result.done) {
let currentCookie: Cookie = result.value;
if (currentCookie.isExpired()) {
cookiesToRemove.push(currentCookie);
} else if (currentCookie.matches(url)) {
validCookies.push(currentCookie);
}
result = iterator.next();
}
cookiesToRemove.forEach((item) => {
this.cache.remove(item.createCookieKey());
})
this.persistor.removeAll(cookiesToRemove);
return validCookies;
}
clear() {
this.cache.clear();
this.persistor.clear();
}
}
TS 版的 KV 缓存 KVCookiePersistor
的具体实现这里先省略了,后面贴完整代码。
到这里,我们已经实现了鸿蒙版的 CookieJar 了,只需要和 httpRequest
结合起来即可
我抽了一个公共的发送请求的方法,只需要在这里加上 CookieJar 的调用即可。 在请求前查找是否有匹配的 Cookie,如果有就添加到 Header 中,同样的在请求返回后存储服务端返回的 Cookie 信息。
let cookieJar: CookieJar = new PersistentCookieJar(EntryContext.getContext());
/**
* 通用请求方法
*/
async function requestSync<T>(path: string, method: http.RequestMethod, extraData?: Object): Promise<Response<T>> {
// 确保 CookieJar 已经初始化
await cookieJar.init();
return new Promise<Response<T>>((resolve, reject) => {
let url = BASE_URL + path;
let uri = parseUri(url);
let header = {};
// 根据 url 加载本地缓存的 Cookie
let cookies = cookieJar.loadForRequest(uri);
if (cookies.length > 0) {
// 将 Cookie 添加到 Header 中
header["Cookie"] = CookieUtils.cookieHeader(cookies);
}
if (method === http.RequestMethod.POST) {
header["Content-Type"] = "application/x-www-form-urlencoded";
}
let httpRequest = http.createHttp();
httpRequest.request(
url,
{
method: method,
expectDataType: http.HttpDataType.OBJECT,
header: header,
extraData: extraData
},
(err, data) => {
let res = new Response<T>()
if (!err && data.responseCode === 200) {
// 请求成功,保存服务端返回的 Cookie
cookieJar.saveFromResponse(uri, CookieUtils.parseHttpRequestCookies(data.cookies))
Object.assign(res, data.result)
} else {
res.errorCode = data.responseCode
res.errorMsg = err.message
}
resolve(res);
}
)
})
}
/**
* 登录请求
*/
async login(username: string, password: string): Promise<Response<User>> {
return requestSync("/user/login", http.RequestMethod.POST, `username=${username}&password=${password}`);
}
运行项目,登录一下,我们的登录状态果然被保存下来了,由于通过 KV 持久化了 Cookie 信息,重启 App 后登录态仍然还在。
鸿蒙学习路线图
路线图适合人群:
- IT开发人员:想要拓展职业边界,享受新技术带来的溢价红利
- 零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能
HarmonyOS 4.0 APP Developer
OpenHarmony 5.0 Next视音频
OpenHarmony 5.0 Next进阶
OpenHarmony 5.0 Next分布式
学习资料
内容概要:《鸿蒙零基础入门学习指南》、《鸿蒙开发学习之UI》、《鸿蒙开发学习之Web》、《鸿蒙开发学习之应用模型》
内容特点:条理清晰,含图像化表示更加易懂。
领取方式:扫描下方二维码即可免费领取!!!
![](https://img-blog.csdnimg.cn/img_convert/ec2b5d4d31d2299469cf203778b5d4e9.png)
《鸿蒙零基础入门学习指南》
一、快速入门
适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用,快速了解工程目录的主要文件,熟悉HarmonyOS应用开发流程。
- 开发准备
- 构建第一个ArkTS应用(Stage模型)
- 构建第一个ArkTS应用(FA模型)
- 构建第一个JS应用(FA模型)
二、开发基础知识
- 应用程序包基础知识
- 应用配置文件(Stage模型)
- 应用配置文件概述(FA模型)
三、资源分类与访问
应用开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。
- 资源分类与访问
- 创建资源目录和资源文件
- 资源访问
四、学习ArkTs语言
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。
- 初识ArkTS语言
- 基本语法
- 状态管理
- 其他状态管理
- 渲染控制
领取方式:扫描下方二维码即可免费领取!!!
![](https://img-blog.csdnimg.cn/img_convert/ec2b5d4d31d2299469cf203778b5d4e9.png)
《鸿蒙开发学习之UI》
一、方舟开发框架(ArkUI)概述
二、基于ArkTS声明式开发范式
- 1、UI开发(ArkTS声明式开发范式)概述
- 2、开发布局
- 3、添加组件
- 4、显示图片
- 5、使用动画
- 6、支持交互事件
- 7、性能提升的推荐方法
三、兼容JS的类Web开发范式
- 1、概述
- 2、框架说明
- 3、构建用户界面
- 4、常见组件开发指导
- 5、动效开发指导
- 6、自定义组件
领取方式:扫描下方二维码即可免费领取!!!
![](https://img-blog.csdnimg.cn/img_convert/ec2b5d4d31d2299469cf203778b5d4e9.png)
《鸿蒙开发学习之Web》
Web组件概述
使用Web组件加载页面
设置基本属性和事件
- 设置深色模式
- 上传文件
- 在新窗口中打开页面
- 管理位置权限
在应用中使用前端页面JavaScript
- 应用侧调用前端页面函数
- 前端页面调用应用侧函数
- 建立应用侧与前端页面数据通道
- 管理页面跳转及浏览记录导航
- 管理Cookie及数据存储
- 自定义页面请求响应
- 使用Devtools工具调试前端页面
ArkTS语言基础类库概述
并发
- 并发概述
- 使用异步并发能力进行开发
- 使用多线程并发能力
- 容器类库
- XML生成、解析、与转换
- 通知
窗口管理
- 窗口开发概述
- 管理应用窗口(Stage模型)
- 管理应用窗口(FA模型)
WebGL
- 概述
- WebGL开发指导
媒体
- 媒体应用开发概念
- 图片
安全
- 访问控制
- ohos.permission.USE_BLUETOOTH
- ohos.permission.DISCOVER_BLUETOOTH
- ohos.permission.MANAGE_BLUETOOTH
- ohos.permission.INTERNET
- ohos.permission.INTERNET
- …
网络与连接
- 网络管理
- IPC与RPC通信
电话服务
- 电话服务开发概述
- 跳转拨号页面
- 获取当前蜂窝网络信号信息
数据管理
- 数据管理概述
- 应用数据持久化
- 场景介绍
- 运作机制
- 约束限制
- 接口说明
- …
文件管理
- 文件管理概述
- 应用文件
- 用户文件
- 分布式文件系统
后台任务管理
- 后台任务总体概述
- 短时任务
- 长时任务
- 延时任务
- 代理提醒
设备管理
- USB服务
- 位置服务
- 传感器
- 分布式跟踪开发指导
- 错误管理
- …
国际化
- 国际化开发概述
- Intl开发指导
- I18n开发指导
应用测试
- 自动化测试框架使用指南
Native API相关指导
- Native API在应用工程中的使用指导
- Drawing开发指导
- Rawfile开发指导
- NativeWindow 开发指导
- …
领取方式:扫描下方二维码即可免费领取!!!
![](https://img-blog.csdnimg.cn/img_convert/ec2b5d4d31d2299469cf203778b5d4e9.png)
《鸿蒙开发学习之应用模型》
应用模型概述
- 应用模型的构成要素
- 应用模型解读
Stage模型开发指导
- Stage模型开发概述
- Stage模型应用组件
FA模型开发指导
- FA模型开发概述
- FA模型应用组件配置
- 进程模型
- 线程模型
领取方式:扫描下方二维码即可免费领取!!!
![](https://img-blog.csdnimg.cn/img_convert/ec2b5d4d31d2299469cf203778b5d4e9.png)