为何登录仅存Refresh Token入Cookie而非Access Token？React Native如何处理？

为何不将Access Token存入Cookie？ #

• 适配多场景请求：前端经常需要在跨域API、WebSocket这类场景里携带Access Token，把Token存在前端内存或localStorage中，能灵活通过请求头的Authorization: Bearer <token>方式传递；而Cookie默认只自动携带到同域接口，跨域需要额外配置CORS和withCredentials，限制较多。
• 降低CSRF风险：Access Token如果存在Cookie中，同域下的CSRF攻击可能利用用户的登录状态发起恶意请求。将Token存在前端内存里，只有主动发起请求时才会携带，能有效降低这类攻击的可能性。
• 匹配Token生命周期：Access Token设计为短期有效（通常15-30分钟），存在内存中页面刷新就会失效，刚好契合它的短期特性；而Refresh Token有效期长，存入HttpOnly Cookie能避免前端操作带来的泄露风险，更适合长期存储。

React Native无Cookie环境下，如何校验Token是否过期？ #

• 解析JWT payload判断过期：JWT的payload中包含exp字段（Unix时间戳，单位秒），可以用jwt-decode库解码Token，对比exp与当前时间：

  import jwtDecode from 'jwt-decode';
  
  const checkTokenExpiration = (token) => {
    if (!token) return true;
    const decodedToken = jwtDecode(token);
    // 转换为毫秒级时间戳后对比当前时间
    return decodedToken.exp * 1000 < Date.now();
  };
  

  你也可以手动解码（去掉Token的中间部分，Base64解码后解析JSON），不用依赖第三方库。
• 请求拦截器前置校验：在封装的网络请求工具中添加拦截器，每次发起请求前先调用校验函数。如果Token已过期，先触发Refresh Token流程（用存在安全存储中的Refresh Token换取新的Access Token），再重试原请求。
• 安全存储Refresh Token：React Native中不要用localStorage存储Refresh Token，建议使用react-native-keychain这类原生安全存储库，将Token存入系统密钥链，避免被恶意应用获取。
• 后台状态码兜底：如果前端校验出现遗漏，后台收到过期的Access Token时会返回401状态码，前端捕获该状态后，立即执行Refresh Token流程，或者引导用户重新登录。

内容的提问来源于stack exchange，提问作者Rick James