Vue中window.addEventListener('message')未触发，Spotify访问令牌获取失败

嘿，我之前做Spotify授权功能的时候也踩过一模一样的坑！你的window.addEventListener('message')没触发，核心问题是你打开的授权回调页面根本没主动向主窗口发送消息，另外还有几个小细节需要调整，咱们一步步来搞定：

1. 给回调页面添加postMessage逻辑 #

你现在的代码只在主窗口监听了message事件，但当Spotify授权完成跳转到http://localhost:8080/spotify后，这个回调页面完全没给父窗口（打开它的那个页面）发任何信号，主窗口的监听器自然收不到东西。

赶紧在你的回调页面（http://localhost:8080/spotify）里加上这段脚本：

window.addEventListener('load', () => {
  // 从URL哈希里提取Spotify返回的令牌数据
  const hashParams = window.location.hash.slice(1).split('&').reduce((acc, param) => {
    const [key, value] = param.split('=');
    acc[key] = decodeURIComponent(value);
    return acc;
  }, {});

  // 确认拿到access_token后，向父窗口发送消息
  if (hashParams.access_token) {
    // 第二个参数要和主窗口的origin一致，生产环境别用'*'
    window.opener.postMessage(
      JSON.stringify({
        type: 'access_token',
        access_token: hashParams.access_token
      }),
      'http://localhost:8080'
    );
    // 发送完成后关闭授权窗口
    window.close();
  }
});

2. 修复授权URL中的HTML实体问题 #

你代码里的getLoginURL函数用了&来拼接URL参数，这是HTML的转义字符，在JavaScript里直接用&就可以了，不然会导致URL参数解析错误：

function getLoginURL(scopes) { 
  console.log('url') 
  return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID + '&redirect_uri=' + encodeURIComponent(REDIRECT_URI) + '&scope=' + encodeURIComponent(scopes.join(' ')) + '&response_type=token'; 
}

3. 给message监听器加上来源校验（可选但推荐） #

为了安全，防止恶意网站发送垃圾消息，你可以在主窗口的监听器里校验消息的来源origin：

window.addEventListener("message", function(event) {
  // 只接受来自本地开发服务器的消息
  if (event.origin !== 'http://localhost:8080') return;

  var hash = JSON.parse(event.data); 
  console.log(hash)
  if (hash.type == 'access_token') {
    callback(hash.access_token); 
  }
}, false);

做完这几步再测试一下——授权完成后回调页会自动发消息给主窗口，你的监听器就能顺利捕获到access_token啦！

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