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

Posted 2023-04-15

【中文标题】HashRouter 导致 Spotify 隐式授权流失败，因为回调 URL 无效

【英文标题】：HashRouter causes Spotify Implicit Grant Flow to fail because callback URL is invalid

【发布时间】：2018-08-29 08:04:57

【问题描述】：

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

如果你把#改成%23，会导致重定向URI无效。

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

我把我的应用放到了github页面上：githubpage

【参考方案1】：

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

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

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

如果您使用他们的implicit grant example 中的 Spotify 函数 getHashParams() 来捕获哈希参数，也请更改此行：

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

到

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

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

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