Question

我的React应用程序中有一个JS文件，该文件连接到服务器，发送用户名和密码，从服务器接收oauth令牌，并将该令牌存储在本地存储中。但是，在由react接收到令牌之前，react在存储在本地存储中的令牌之前发送下一个请求。导致401未经授权的访问。

AuthService.js

<div class="tab-content" *ngxCacheIf="tab.IsSelected">
    <!--Html goes here-->
</div>

SignIn.jsx

 login(username, password) {
    console.log(username);
     return this.fetch(`${this.domain}/api/AuthAPI/getCredentials`, {
        headers: {
            'Access-Control-Allow-Origin': "*"    
        }
    }).then(res => {
        this.fetch(`${this.domain}/Token`, {
            method: 'POST',
            body: 'grant_type=password&username=' + res[0]
        }).then(response => {
            var date_token_issue = new Date();
            this.setToken(response.access_token,response.expires_in, date_token_issue) // Setting the token in localStorage
            return Promise.resolve(response);
        })
    })

}

setToken(idToken,expires, date_token_issue ) {
    localStorage.setItem('id_token', idToken)
    localStorage.setItem('expires', expires)
    localStorage.setItem('date_token_issue', date_token_issue)
}

我需要一种方法来强制做出反应，以等待JS接收到令牌并将其存储在本地存储中，并防止响应发送下一个请求，直到它找到存储在本地存储中的令牌为止。

Answer 1

login(username, password) {
console.log(username);
 return this.fetch(`${this.domain}/api/AuthAPI/getCredentials`, {
    headers: {
        'Access-Control-Allow-Origin': "*"    
    }
}).then(res => {
    // Add a return here
    return this.fetch(`${this.domain}/Token`, {
        method: 'POST',
        body: 'grant_type=password&username=' + res[0]
    }).then(response => {
        var date_token_issue = new Date();
        this.setToken(response.access_token,response.expires_in, date_token_issue) // Setting the token in localStorage
        return Promise.resolve(response);
    })
})

您需要在then函数中添加一个return，以便await将等待内部的诺言解决。

在渲染方法从服务器接收令牌之前运行React渲染

1 个答案: