Question

我收到来自React Axios发布请求的以下响应...

{
    "Id": 1,
    "UserName": "***",
    "Password": null,
    "Email": "***",
    "FirstName": "Steven",
    "Surname": "Collins",
    "CompanyName": "***",
    "OrisecAccountNumber": "***",
    "Token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1bmlxdWVfbmFtZSI6InN0ZXZlLmNvbGxpbnNAb3Jpc2VjLmNvLnVrIiwicm9sZSI6WyJPcmlzZWNBZG1pbiIsIkluc3RhbGxlckFkbWluIl0sIm5iZiI6MTU3MzA2OTg2NiwiZXhwIjoxNTczMDcwNzU2LCJpYXQiOjE1NzMwNjk4NjYsImlzcyI6Ik9yaXNlYyJ9.UgUbLpM0Zs0KYT4XRy20Tkfc9SLgT-8EhhZziahper8",
    "TokenCreatedOnUtc": "0001-01-01T00:00:00",
    "TokenExpiresInMinutes": 15,
    "Roles": [
        "OrisecAdmin",
        "InstallerAdmin"
    ]
}

POST请求如下...

instancePost.post('/identity/account/login', {
    username: '***',
    password: '***'
})
    .then(function (response) {
        localStorage.setToken('access_token', JSON.stringify(response.data));
        localStorage.setToken('refresh_token', JSON.stringify(response.data));
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

}

我的本地存储服务如下...

// LocalStorageService.js
const LocalStorageService = (function () {
    var _service;
    function _getService() {
        if (!_service) {
            _service = this;
            return _service
        }
        return _service
    }
    function _setToken(tokenObj) {
        localStorage.setItem('access_token', tokenObj.access_token);
        localStorage.setItem('refresh_token', tokenObj.refresh_token)
    }
    function _getAccessToken() {
        return localStorage.getItem('access_token');
    }
    function _getRefreshToken() {
        return localStorage.getItem('refresh_token');
    }
    function _clearToken() {
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
    }
    return {
        getService: _getService,
        setToken: _setToken,
        getAccessToken: _getAccessToken,
        getRefreshToken: _getRefreshToken,
        clearToken: _clearToken
    }
})();
export default LocalStorageService;

我已经在Postman中测试了POST请求，并且工作正常。我的问题是如何将令牌值存储在本地存储中。我目前正在执行此操作，该操作存储名称但不存储实际令牌。

 localStorage.setToken('access_token', JSON.stringify(response.data));
            localStorage.setToken('refresh_token', JSON.stringify(response.data));

谢谢。

Answer 1

您的localstorage功能似乎是针对access_token和refresh_token的，但仅提供了JWT令牌。此外，看起来您正在使用setToken而不是here

所述的setItem

更改

 localStorage.setToken('access_token', JSON.stringify(response.data));

到

localStorage.setItem('access_token', response.data.Token);

由于令牌是字符串类型，因此您可以像这样访问它：

localStorage.getItem('access_token', response.data.Token);

React axios在本地存储中存储令牌

1 个答案: