ReactJS与react-router-v4中localStorage返回undefined问题排查

这问题我之前做认证路由时也碰到过，先给你明确核心点：原生localStorage.getItem()在指定键不存在时，确实会返回null，而非undefined。你遇到的undefined，肯定是代码里的额外逻辑导致的，咱们一步步拆解原因和解决办法：

一、为什么会返回undefined？ #

常见的几个触发场景：

• 错误使用逻辑或运算符（||）赋值：如果你写了类似const token = localStorage.getItem('token') || undefined的代码，因为null是假值，逻辑或会取后面的undefined作为结果，硬生生把原生的null改成了undefined。
• 自定义封装的读取函数逻辑出错：如果你封装了自己的localStorage读取方法，比如函数里判断没找到值时直接return undefined，而不是返回原生的null，就会出现这个问题。
• 意外存入字符串"undefined"后解析错误：如果之前不小心执行了localStorage.setItem('token', undefined)，setItem会把undefined转成字符串"undefined"存入；之后如果用JSON.parse(localStorage.getItem('token'))解析，会抛出语法错误，要是你用try-catch捕获后返回了undefined，也会出现这种情况。

二、解决方法 #

针对不同原因，对应调整：

1. 直接使用原生API返回值：去掉多余的逻辑或赋值，直接写：

   const token = localStorage.getItem('token');
   

   这样当token不存在时，token就是原生的null，完全符合你的预期。
2. 修正自定义封装函数：如果用了自己的读取函数，确保未找到值时返回null，比如处理JSON格式token的封装：

   function getAuthToken() {
     const storedValue = localStorage.getItem('token');
     if (storedValue === null) return null;
     // 处理JSON格式的token（如果之前是存的JSON）
     try {
       return JSON.parse(storedValue);
     } catch (err) {
       // 解析失败时可返回原字符串或null，根据需求调整
       return storedValue;
     }
   }
   

3. 清理错误存储的值：如果之前不小心存入了"undefined"字符串，先执行这个命令清理：

   localStorage.removeItem('token');
   

   之后退出登录时记得用removeItem删除键，而不是存入undefined或空字符串。
4. 认证判断逻辑优化：判断用户是否已认证时，直接检查token的真实性：

   if (token) {
     // token存在，允许访问路由
     next();
   } else {
     // token不存在，跳转到登录页
     next('/login');
   }
   

   这里null、空字符串、undefined都会被视为假值，能正确判断未认证状态。

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