reactjs - HashRouter 导致 Spotify 隐式授权流失败，因为回调 URL 无效

Question

我有一个HashRouter，它使URL添加#，导致在URL回调response_type查询参数之后添加#。

如果将 # 更改为 %23，将导致重定向 URI 无效。

如何结合使用 HashRouter 和 Spotify 隐式授权流程？

我将我的应用程序放在了 github 页面上：githubpage

Answer 1

解决此问题的快速解决方案是，假设您的重定向 URI 是http://localhost:8000/#/callback，使用正则表达式向您的 HashRouter 添加一个路由：

<Route path="/:access_token(access_token=.*)" component={ComponentWhichParsesTheURLAndExtractTheToken} />

这会将任何类型的 url定向http://localhost:8000/#/access_token=到所需的组件。所需的组件应该是您解析 url 以捕获令牌的组件。

如果您使用getHashParams()他们的隐式授权示例中的 Spotify 函数来捕获哈希参数，也请更改此行：

q = window.location.hash.substring(1);

至

q = window.location.hash.substring(2); 

为了/从window.location.hash路径中删除第一个字符。

对于这个问题，可能有一个更好的解决方案（参见这个答案 angular），尽管我认为这是一个适用于适度应用程序的快速破解。