打开浏览器按 F12,浏览切到 Application 面板,器t去里左侧找到 Storage 那一栏,浏览点开 Local Storage 或 Session Storage,器t去里你就能看到当前域名下存了哪些 token。浏览这是器t去里最直接的办法,Chrome、浏览Edge、器t去里Firefox 都差不多,浏览只是器t去里面板名字略有差异。Firefox 叫「存储」,浏览位置在开发者工具的器t去里「存储器」标签里。
但很多人第一次找的浏览时候会懵——怎么列表是空的?大概率是因为你开的开发者工具窗口,跟实际登录的器t去里那个页面不是同一个标签页。Storage 面板只显示当前选中标签页对应域名的浏览数据。你登录的是 A 标签,F12 开在 B 标签,那当然什么都看不到。
Cookie 里的 token 藏得更深一点
有些网站不把 token 放 localStorage,而是塞进 Cookie。这时候你在 Application 面板左侧展开 Cookies,选对应的域名,能看到一堆键值对。但要注意,如果 token 被标记为 HttpOnly,JavaScript 读不到,你在 Console 里敲 document.cookie 也看不到它。这种情况下只能通过 Network 面板观察请求头里的 Cookie 字段。
我遇到过一个小伙伴,死活找不到 token,折腾了半小时,最后发现人家用的是 HttpOnly Cookie。浏览器故意不让 JS 访问,就是为了防 XSS 攻击。所以查不到不代表没有,换个地方看就行。
Network 面板才是万能入口
不管 token 存在哪,只要它参与接口请求,就一定会在 Network 里露脸。刷新页面,点开任意一个 XHR 或 Fetch 请求,看 Request Headers。常见的字段名有 Authorization、X-Token、X-Access-Token,值通常是 Bearer 开头的一长串,或者干脆就是裸 token。
有时候请求头里没有,那就翻 Response Headers,登录接口的响应体里往往直接返回 token。找到之后,你还可以在 Network 面板里右键那个请求,选择 Copy as cURL,把整条命令粘贴到终端里跑一遍,token 就明明白白躺在那里。
几个容易踩的坑
单页应用的路由切换不会触发整页刷新,token 可能是在某个异步回调里写进去的。你打开 Application 面板的时候数据还没写入,等两秒再点一下刷新按钮就好了。另外,有些网站用了 Service Worker 或者 IndexedDB 来存凭证,那就得去对应的面板里翻。IndexedDB 在 Application 面板左侧,点开数据库名,一层层展开对象仓库才能看到。
还有一种情况:token 根本不在浏览器里。比如某些后端渲染的页面,token 直接嵌在 HTML 的 <script> 标签里,作为全局变量存在。这时候你在 Console 里敲 window.__TOKEN__ 之类的变量名反而更快。具体叫什么名字,得看页面源码。
查 token 这件事,本质上是搞清楚「谁在什么地方以什么形式保存了凭证」。浏览器提供了至少四个入口:Storage、Cookie、Network、Console。哪个顺手用哪个,没必要死磕一个地方。我自己的习惯是先开 Network 扫一眼请求头,找不到再去 Storage 翻,最后才考虑 Cookie 和 IndexedDB。顺序反过来也行,看个人手感。