将访问令牌从 api 传递到不同的页面

Posted 2023-04-15

【中文标题】将访问令牌从 api 传递到不同的页面

【英文标题】：Passing Access Token from an api to different pages

【发布时间】：2020-09-09 17:22:03

【问题描述】：

所以我目前正在使用带有 reactJS 的 Spotify API，并在 Spotify 对登录进行身份验证时获取用户的访问令牌，它重定向到我将其设置为的第一页，('/') of Component= 家。但是从那个主页，我想通过一个按钮的路径“/播放列表”路由到一个不同的页面，在该按钮中我通过该按钮推送 url，

this.props.history.push('/playlist/#access_tokens=' + spotifyApi.getAccessTokens())

这是我通过 URL 传递访问令牌的唯一方法。

这是不好的做法吗？

【问题讨论】：

上下文是传递访问令牌的更简单方法：reactjs.org/docs/context.html

@HunterMcMillen 但即使有上下文，我是否还必须以同样的方式推送路径名

【参考方案1】：

我很难理解你的目标，但如果你只想通过 url 传递 access_token，你可以使用 state 来隐藏用户的令牌

this.props.history.push(
  pathname: '/playlist',
  state: 
    accessTokens: spotifyApi.getAccessTokens()
  
)

然后通过下一条路得到它

const location = useLocation();
const tokens = location.state && location.state.accessTokens;

但我不明白你为什么不将令牌传递给任何管理库，如 redux、mobx 或其他浏览器存储（localStorage、sessionStorage）？

【讨论】：

我不使用任何管理库，因为我要创建的是一个相对简单的应用程序，总共只有 3 个页面，一个登录页面 (spotify oauth) -> 一个用户输入页面 -> 页面根据该输入返回某些内容（音乐播放列表）。

谢谢顺便说一句，我忘了我可以在状态下通过它。

@surpol 在这种情况下，我建议您将令牌传递给 localStorage，它将在所有页面上可用，并且在页面刷新后可用 ^^，就像在路由器状态中一样，但路由器状态将是未定义的，如果您复制 url 地址并在新标签中打开它

响应迟了，但是，是的，我一直在使用 localstorage 来存储访问和刷新令牌。这是不好的做法吗？