如何将我的 Spotify access_token 存储在本地以便我可以在不同的 Javascript 文件中访问它

Question

嗨，我对使用 Javascript 进行编码还比较陌生，我正在尝试弄清楚如何在不同的 javascript 文件中访问 Spotify API 的 access_token。我运行两台本地服务器，一台 React，一台在 node.js 中。 React 服务器有一个按钮，允许用户在节点服务器中使用 Spotify 的 Oauth 登录，然后访问令牌和刷新令牌成功重定向回 React 服务器。 OAuth 工作得很好，因为我从他们提供的 Spotify API 指南中得到它。我设置这些文件的方式是，在我的主项目中，我有一个较旧的 auther-server，其中包括 Spotify OAuth 文件和一个客户端文件夹，这是我创建 React 应用程序的地方。这是我获得 OAuth 文件的地方（https://github.com/spotify/web-api-auth-examples）。这些文件中唯一发生变化的是 authorization_code 文件夹中的 app.js，我在其中输入了我的客户端和密码 ID，并使用了正确的重定向 url，我也这样做了：

res.redirect('http://localhost:3000/#' +
      querystring.stringify({
        access_token: access_token,
        refresh_token: refresh_token
      }));
  } else {
    res.redirect('/#' +
      querystring.stringify({
        error: 'invalid_token'
      }));

我在其中进行重定向 link 使用令牌转到 http://localhost:3000/#，这是我的 React 应用程序。从那里我转到我的 React 目录，在 App.js 文件中，我遵循我在 youtube 上找到的指南，它帮助我了解用户正在播放的内容 (https://www.youtube.com/watch?v=prayNyuN3w0&t=1496s)。这是代码：

import React, { Component, useEffect } from "react";
import "./App.css";
import Spotify from 'spotify-web-api-js';


const spotifyWebApi = new Spotify();
class App extends Component {
  constructor() {
    super();
    const params = this.getHashParams();
    this.state ={
      loggedIn: params.access_token ? true : false,
      nowPlaying: {
        name: 'Not Checked',
        image: '',
      } 
    }
    if (params.access_token){
      spotifyWebApi.setAccessToken(params.access_token)
    }
  }
  getHashParams() {
    var hashParams = {};
    var e,
      r = /([^&;=]+)=?([^&;]*)/g,
      q = window.location.hash.substring(1);
    while ((e = r.exec(q))) {
      hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
  }
  getNowPlaying(){
    spotifyWebApi.getMyCurrentPlaybackState()
      .then((response) => {
      this.setState({
          nowPlaying:{
            name: response.item.name,
            image: response.item.album.images[0].url
          }
        })
      })   
  } 
  render() {
    return (
      <div className="App">
        <a href="http://localhost:8888">
          <button>Login With Spotify</button>
        </a>
        <div>Now Playing: {this.state.nowPlaying.name}</div>
        <div>
          <img src={ this.state.nowPlaying.image } style={{width: 100}}/>
        </div>
        <button onClick={() => this.getNowPlaying()}>Check Now Playing</button>
        <br></br>
      </div>
    );
  }
}
export default App;

这一切都很好，但我现在正在尝试访问用户的数据（播放列表），以便稍后可以使用朴素贝叶斯和 KNN classifers 提出新的建议，但我会在解决这个问题后解决这个问题先咬。我查找了存储令牌的方法并找到 localStorage.set(token....) 将其存储在浏览器中，但我没有成功，因为我对在我的代码中设置它的位置感到困惑。我认为我使用 spotify web api js 库 https://github.com/jmperez/spotify-web-api-js 也值得一提。我猜想我会在 class 应用程序中使用类似的功能，例如 getNowPlaying() 来获取播放列表，但我总是迷路。这是我在这里的第一个问题，我可能没有在这里很好地解释我的问题，但我希望我能在这里找到一些帮助。谢谢，如果我需要提供更多信息，请告诉我。 :)

Answer 1

您可能处于领先地位，可以用 localStorage.set 做您想做的事。

它是全球可访问的。您可以从检索令牌的任何地方到 localStorage.set 来存储它。然后，您就可以在应用中的任何位置执行 localStorage.get。

使用 localStorage 是个好主意，因为它可以帮助您在页面刷新之间保留此令牌。如果有人可以访问您使用的机器，出于安全考虑，您可能希望在某个时候将其从 localStorage 中删除。

如果您不想使用 localStorage，另一种方法是将其设置在一个单独的 JavaScript 文件中，您可以将其导入任何您可能想使用它的地方。

如果你想让数据集中更进一步，你甚至可以寻找存储原则。

如何将我的 Spotify access_token 存储在本地以便我可以在不同的 Javascript 文件中访问它

How do I store my Spotify access_token local so I can access it in different Javascript files

javascript

spotify

reactjs