Flutter WebView 如何与 h5 同步登录状态

大家好，我是 17。

Flutter WebView 一共三篇文章

1. 在 Flutter 中使用 webview_flutter 4.0 | js 交互
2. Flutter WebView 性能优化，让 h5 像原生页面一样优秀
3. Flutter WebView 如何与 h5 同步登录状态

本篇是第 3 篇，讲下 Flutter WebView 与 h5 如何同步状态。

cookie 简介

为什么要介绍 cookie

cookie 对于前端小伙伴来说 cookie 再熟悉不过了，但其它端如果没有用过类似的东西不知道也很正常。虽然网上的资料很多，但是对于新手来说，还是无从分辨的，不知道应该看哪些内容，我就一起都说了吧。

cookie 定义

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器——如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

HTTP 是无状态的：在同一个连接中，两个执行成功的请求之间是没有关系的。这就带来了一个问题，用户没有办法在同一个网站中进行连续的交互，比如在一个电商网站里，用户把某个商品加入到购物车，切换一个页面后再次添加了商品，这两次添加商品的请求之间没有关联，浏览器无法知道用户最终选择了哪些商品。而使用 HTTP 的标头扩展，HTTP Cookie 就可以解决这个问题。把 Cookie 添加到标头中，创建一个会话让每次请求都能共享相同的上下文信息，达成相同的状态。

注意，HTTP 本质是无状态的，使用 Cookie 可以创建有状态的会话。

以上内容节选自 MDN

保存在本地的意思是保存在本地的磁盘上，当你关闭浏览器甚至关机都没关系，下次打开浏览器的时候它还在。因为每次都会随域名自动发送，cookie 不宜太大，一般不超过 4KB。

token 的作用

token 的作用我举个例子，就是我去你家串门，第一次到你家，你不认识我，问：你是谁？我回答：我是 17。然后你让我进门了。第二次去你家，你还是不认识我，因为每次串门都是完全独立的，可以当作从没来过你家。你依旧问：你是谁？我回答：我是 17，你又让我进门了。如果我经常去你家串门每次都问还是很麻烦的。所以你就给我了一个能证明我身份的令牌（token)，我再次到你家串门的时候，直接拿出令牌，令牌上可能是这样写的：我是 17，我们见过的。你一看，啊，原来是 17 啊，快请进。

token 就相当于是这样的令牌。一个用户在网站的一个页面中登录了，他的登录信息会保存在 cookie 里，在访问下一个页面的时候，浏览器会带上 cookie 的信息向服务器请求页面，服务器根据 cookie 的信息就知道你是否登录了。
token 相当于一把钥匙，能开锁。通过 token 无法反解出用户名和密码。密码不要直接放在 cookie 中。

cookie 可以有很多 key value，token 只是这众多的 key value 中的一个

Flutter WebView 中 cookie 的基本操作。

在 webview_flutter 4 中有 cookieManager 专门用来管理 WebView 中的 cookie，我们先来学习下用法。

用 WebViewCookie 设置 cookie

 cookieManager.setCookie(
      const WebViewCookie(
        name: 'IAM17',
        value: 'FE',
        domain: 'juejin.cn',
      ),
  );

这样就行了，很简单吧。还有一个参数 path，默认是 ‘/’。 setCookie 返回的是 Future<void>。

用 cookieManager 清除 cookie

cookieManager.clear() 这个就太简单了。直接清除就好了。需要注意的是，这个方法杀伤力有点大，是无差别攻击，所有 WebView 实例中的 cookie 都会被清除，慎用！。

cookieManager 的能力也就到此为止了，即不能读 cookie，也不能删除单条 cookie，剩下的还指望万能的 javascript。

用 js 设置 cookie

虽然 cookieManager.setCookie 的方法很好用，但有的时候，你可能需要用 js 来设置 cookie。

最简单的只要一个key，一个value，这样设置的 cookie 是一个会话 cookie，浏览器关闭后 cookie 失效。

var key='name',value='IAM17';
document.cookie = `${
     
     key}=${
     
     encodeURIComponent(value)