ReactJS：阻止href替换URL哈希中的令牌值

我太懂这种闹心的感觉了——好不容易搞定Spotify的登录认证，拿到了access token和refresh token存在URL哈希里，结果一个锚点跳转直接把关键令牌搞没了，刷新页面直接歇菜。咱先把问题根源说透：浏览器默认的#锚点跳转是直接替换整个URL哈希部分的，你原来的哈希是#access_token=xxx&refresh_token=yyy，一点击带#main1的按钮，整个哈希就变成#main1，令牌自然就丢失了。

下面是经过验证的最佳解决思路，分两步走：

1. 把令牌从URL哈希转移到持久化存储 #

依赖URL哈希存令牌本身就不稳定，刷新、跳转都容易丢，第一步必须把令牌从哈希里提取出来，存到更可靠的地方（比如localStorage或者后端Cookie）。

实现代码示例（React中） #

在登录成功后的页面（比如首页的useEffect里）添加这段逻辑：

import { useEffect } from 'react';

function HomePage() {
  useEffect(() => {
    // 解析URL哈希中的参数
    const hashParams = new URLSearchParams(window.location.hash.slice(1));
    const accessToken = hashParams.get('access_token');
    const refreshToken = hashParams.get('refresh_token');

    if (accessToken && refreshToken) {
      // 持久化到localStorage
      localStorage.setItem('spotify_access_token', accessToken);
      localStorage.setItem('spotify_refresh_token', refreshToken);

      // 可选但推荐：清理URL哈希，避免令牌暴露在地址栏，同时防止后续跳转干扰
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }, []);

  // ... 其他组件逻辑
}

这样一来，令牌就存在本地了，哪怕刷新页面也能读得到，不用再依赖URL哈希。

2. 用不修改URL哈希的方式实现锚点滚动 #

既然默认的#锚点会修改哈希，那我们就换一种方式实现页面内滚动，完全不碰URL哈希。

方案A：原生JS滚动（最简单） #

直接给按钮绑定onClick事件，用scrollIntoView滚动到目标元素：

<Button onClick={() => {
  const targetSection = document.getElementById('main1');
  if (targetSection) {
    // 平滑滚动可选，去掉behavior参数就是瞬间跳转
    targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}}>Foo?</Button>

方案B：用react-scroll库（更优雅的React方式） #

如果你的项目需要更复杂的滚动效果（比如避开通栏导航），可以用react-scroll库，配置时关闭哈希修改：

import { Link } from 'react-scroll';

// 在组件中使用
<Link
  to="main1" // 目标元素的id
  smooth={true} // 平滑滚动
  hashSpy={false} // 关键：关闭哈希监听，不会修改URL
  offset={-80} // 可选：滚动偏移，比如避开80px高的导航栏
  duration={500} // 滚动时长（毫秒）
>
  Foo?
</Link>

3. 后续API调用的令牌获取方式 #

之后调用Spotify API时，直接从localStorage读取令牌即可：

const getSpotifyToken = () => {
  const accessToken = localStorage.getItem('spotify_access_token');
  if (!accessToken) {
    // 没有令牌的话跳转到登录页
    window.location.href = '/login';
    return null;
  }
  return accessToken;
};

// 调用API示例
async function fetchUserProfile() {
  const token = getSpotifyToken();
  const response = await fetch('https://api.spotify.com/v1/me', {
    headers: { Authorization: `Bearer ${token}` }
  });
  return response.json();
}

补充安全提示 #

• localStorage容易受到XSS攻击，如果你的应用对安全性要求很高，可以考虑让后端把refresh_token存在HttpOnly Cookie里，access_token存在内存+sessionStorage（关闭页面自动清空）。
• 定期检查令牌的过期时间，用refresh_token自动刷新access_token，避免用户重新登录。

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