js获取token

登录接口返回的token，通常就藏在响应头的Authorization字段里，或者藏在响应体的data.token中。但真正让你头疼的，往往是那个“取出来之后怎么存”的问题。

我见过太多前端同事，一上来就localStorage.setItem('token', res.data.token)，干净利落。但没过多久，用户反馈说“我明明登录了，刷新一下就退出登录了”。排查半天，发现是后端把token的有效期设成了30分钟，而localStorage里的token过期后，前端根本不知道——它只会傻傻地带着这个失效的token去请求接口，然后收到401。

所以，取token的第一步，不是“取”，而是先搞清楚后端给的是什么类型的token。JWT（JSON Web Token）和Opaque Token（不透明字符串）的处理方式完全不同。JWT的payload里带着过期时间，前端可以自己解析出来做提前判断；而Opaque Token就是个随机字符串，你只能靠后端返回的expires_in字段来倒计时。

说个具体场景。我去年做一个后台管理系统，后端小哥给的是JWT，放在响应体里：{ "code": 0, "data": { "access_token": "eyJhbGciOi...", "expires_in": 7200 } }。我当时的做法是：

const {  access_token, expires_in } = res.data.data; // 存内存，不存localStorage store.token = access_token; store.tokenExpiry = Date.now() + expires_in * 1000; 

为什么存内存而不是localStorage？因为那个系统是内部工具，用户关掉浏览器再打开，重新登录一次成本很低。但如果是面向C端的应用，用户关掉浏览器第二天再打开，你让他重新登录，他大概率会骂人。这时候就得用localStorage，但必须配合“记住我”选项——勾选了才存，没勾选就只存sessionStorage。

取token时还有个坑，就是请求拦截器里怎么拿。axios拦截器是这么写的：

axios.interceptors.request.use(config => {  const token = store.token || localStorage.getItem('token'); if (token) {  config.headers.Authorization = `Bearer ${ token}`; } return config; }); 

这段代码看起来没问题，但实际运行中你会遇到一个诡异的现象：用户登录成功后，第一次发请求居然没带token。原因在于——登录接口的响应还没回来，你就把token存进store了，但此时如果另一个请求恰好也在路上，拦截器执行时store.token还是空的。这种竞态条件，用Promise.all或者队列能解决，但最粗暴的办法是登录成功后延迟100毫秒再发其他请求。

更实用的做法是，把token的获取封装成一个函数，而不是直接读变量。比如：

function getToken() {  return store.token || localStorage.getItem('token') || sessionStorage.getItem('token'); } 

然后在拦截器里调用getToken()。这样即使store还没更新，也能从storage里兜底拿到。但注意，storage的读取是同步的，频繁读取会影响性能——不过token读取不像图片加载那么频繁，实际影响可以忽略。

还有一个细节容易被忽略：token里可能带着特殊字符，比如JWT的签名部分有.和-，如果你把token拼在URL里（比如用GET请求传token），必须用encodeURIComponent包一层。别笑，我真见过有人直接把token拼在query上，结果后端解析出来少了一截，排查了半天发现是token里的+号被浏览器当成空格了。

最后说个反直觉的事。有时候你费尽心思把token取出来了，发现后端压根不认。原因是后端要求的是“双token机制”——access_token和refresh_token。access_token短命（15分钟），refresh_token长命（7天）。前端在access_token过期时，不能傻傻地跳登录页，得用refresh_token去换新的access_token。这时候取token的逻辑就变成了：先检查本地有没有refresh_token，有就静默刷新，没有才让用户重新登录。

所以你看，取token这件事，表面上是“从响应里拿字符串”，实际牵扯到存储策略、过期处理、竞态条件、编码格式。写代码前先问自己三个问题：这个token会活多久？用户关掉浏览器后还在不在？后端希望我用什么方式带回去？想清楚了，再动手写那行赋值语句也不迟。

(责任编辑：探索)