Javascript Vue-Spotify API验证。登录问题

我想用Vue SPA（网页包）和Spotify API创建一个应用程序。不幸的是，我无法获得正确的身份验证。因此，Spotify提供了一个基本的代码片段，您可以使用它来构建应用程序。我尝试使用该代码并将其重写，以便将其与Vue一起使用。结果不太好，我有各种各样的问题。我已经注册了我的应用程序，并保存了客户id等详细信息

Spotify的原始片段

问题

• 代码不会记录来自调用的响应。spotify auth/login的弹出窗口在url中为我提供了一个auth令牌，但也没有关闭。此外，display属性保持为false，因此login/auth函数似乎出现了问题

代码：

因此，当我从url复制令牌，并将其粘贴为数据属性并单独运行getUserData时，它会返回数据，如下所示：

<button class="button is-spotify" :class="{display : display}" @click="getUserData()">Login to Spotify <i class="fa fa-spotify"></i></button>

但这实际上不是我想要的，因为我必须每小时设置一个新令牌，而不是每小时重新验证的用户。因此，我希望得到与基本代码片段相同的结果

getAuth() {

    //run login + getUserData
    //maybe something like: get token and set it to this.accessToken


}

---

我注意到您的JSFIDLE使用了

$.ajax

，它不遵循promise规范。据我记忆所及，你可以用$来使用

.done

和

.fail

。嗨，这不是问题，

axios

用一个简单的。除此之外，这不是问题所在，因为我在运行getUserData（）函数时会得到响应，正如我上面所描述的。所以问题是身份验证登录有问题。。我不知道是什么。我看到的一个问题是，

getAuth

函数中的回调具有不同的作用域，因此

this.getUserData（）

和

this.display

都将是未定义的，除非将

.bind（this）

添加到函数声明中，或者干脆用箭头函数代替。你有没有用过？我发现您的JSFIDLE使用的是

$.ajax

，它不符合promise规范。据我记忆所及，你可以用$来使用

.done

和

.fail

。嗨，这不是问题，

axios

用一个简单的。除此之外，这不是问题所在，因为我在运行getUserData（）函数时会得到响应，正如我上面所描述的。所以问题是身份验证登录有问题。。我不知道是什么。我看到的一个问题是，

getAuth

函数中的回调具有不同的作用域，因此

this.getUserData（）

和

this.display

都将是未定义的，除非将

.bind（this）

添加到函数声明中，或者干脆用箭头函数代替。你有没有用过？我也在挣扎

<button class="button is-spotify" :class="{display : display}" @click="getUserData()">Login to Spotify <i class="fa fa-spotify"></i></button>

getUserData() {
    axios({
        method: 'get',
        url: 'https://api.spotify.com/v1/me',
        headers: {
           'Authorization': 'Bearer ' + this.accessToken
        }
    }).then(function(response) {
        console.log(response);
    })
}

getAuth() {

    //run login + getUserData
    //maybe something like: get token and set it to this.accessToken


}