React Native中AsyncStorage存储的Token属性无法访问问题求助

问题根源 #

你遇到的问题是因为JWT的Payload部分采用Base64URL编码，而非标准Base64编码。直接用普通base64解码会得到格式错误的字符串，导致无法正确解析为JSON对象，进而无法访问userId属性。

解决方案步骤 #

1. 转换Base64URL为标准Base64：替换URL安全字符并补全padding
2. 正确解码并解析JSON：将解码后的字符串处理为JSON对象

修改后的代码 #

import { useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import base64 from 'base-64'; // 确保已安装该库

useEffect(() => {
  const getTokenAndDecode = async () => {
    try {
      const token = await AsyncStorage.getItem('token');
      if (token) {
        const parts = token.split('.');
        if (parts.length !== 3) {
          console.log('无效的JWT格式');
          return;
        }
        
        // 处理Base64URL转标准Base64
        let payload = parts[1]
          .replace(/-/g, '+')
          .replace(/_/g, '/');
        // 补全padding（Base64长度必须是4的倍数）
        const paddingLength = 4 - (payload.length % 4);
        if (paddingLength !== 4) {
          payload += '='.repeat(paddingLength);
        }

        // 解码并解析JSON
        const decodedPayload = base64.decode(payload);
        const decodedToken = JSON.parse(decodedPayload);
        
        console.log('解析后的Token:', decodedToken);
        if (decodedToken.userId) {
          setUserId(decodedToken.userId);
        } else {
          console.log('UserID不存在于Token中');
        }
      }
    } catch (error) {
      if (error instanceof SyntaxError) {
        console.error('JSON解析错误:', error);
      } else {
        console.error('获取Token失败:', error);
      }
    }
  };

  getTokenAndDecode();
}, []);

额外建议 #

• 可以使用成熟的JWT库（如jwt-decode）简化解析流程，避免手动处理编码转换：

  import jwtDecode from 'jwt-decode';
  
  // 替换解码逻辑
  const decodedToken = jwtDecode(token);
  

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