сохранение данных аутентификации на LocalStorage реагировать js

Question

Я разрабатываю приложение в Reactjs и использую axios для работы с запросами, и мне нужно сохранить пользовательские данные, сохраненные в localStorage, однако в моем коде чего-то не хватает, поскольку оно не определено в значении, в котором оно было быть данными, которые мне нужны.

Файл SingUp

class SignIn extends Component {

    constructor(props) {
        super(props);
        this.state = { value: "" };
    }

    handleSignIn = async e => {
        e.preventDefault();
        const { email, password } = this.state;
        if (!email || !password) {
        this.setState({ error: "Preencha e-mail e senha para continuar!" });
        } else {
            try {            
                const response = await api.post("login", querystring.stringify({ email, password }));            
                login(response.data.token);
                console.log('ttttt', login(response.data.token));            
                this.props.history.push("/menu");
            } catch (err) {
                this.setState({
                error:
                    "Houve um problema com o login, verifique suas credenciais. T.T"
                });
            }
        }        
    };

***********************

    <form onSubmit={this.handleSignIn}>
    {this.state.error && <p>{this.state.error}</p>}
        <div className="form-group">
            <label>Email:</label>
            <input
                type="email"
                placeholder="E-mail"
                onChange={e => this.setState({ email: e.target.value })}
                className='form-control'
            />
            <br />
            <label>Senha:</label>
            <input
                type="password"
                placeholder="Password"
                onChange={e => this.setState({ password: e.target.value })}
                className='form-control'
            />
        </div>
        <div className='row'>
            <div className='col-md-4'>                            
                <button type="submit" >Log In</button>
            </div>
        </div>
    </form> 

***********************

Файл API

import axios from "axios";
import { getToken } from "./auth.js";

const api = axios.create({
    baseURL: "https://localhost/aplicacao",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
});

api.interceptors.request.use(async config => {
    const token = getToken();
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
});

export default api;

Файл аутентификации

export const TOKEN_KEY = localStorage;
export const isAuthenticated = () => localStorage.getItem(TOKEN_KEY) !== null;
export const getToken = () => localStorage.getItem(TOKEN_KEY);
export const login = token => {
    localStorage.setItem(TOKEN_KEY, token);
};
export const logout = () => {
    localStorage.removeItem(TOKEN_KEY);
};

файл Package.json

{
  "name": "teste1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --config webpack.dev.js",
    "test": "jest ./test"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "./test/enzyme.setup.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^1.0.0",
    "cors": "^2.8.5",
    "css-loader": "^2.0.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.6.0",
    "node-sass": "^4.9.3",
    "react-router-dom": "^4.3.1",
    "react-test-renderer": "^16.8.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.8",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.4",
    "react-check-auth": "^0.2.0-alpha.2",
    "react-dom": "^16.8.4"
  }
}

Answer 1

Если токен должен быть доставлен клиенту в виде файла cookie, его следует найти в заголовке set-cookie HTTP-ответа. Вы можете получить к нему доступ как response.headers['set-cookie'] в axios. Некоторый дальнейший синтаксический анализ может потребоваться, поскольку заголовок в синтаксисе key=value. В вашем случае это может выглядеть как token=1234567890abcdef.

Обратите внимание, что приведенный вами пример ответа не включает этот заголовок. Сначала вам нужно получить ответ, который делает.

Остальное, похоже, работает, несмотря на сомнительную ошибку. В вашем Auth файле первая строка

export const TOKEN_KEY = localStorage;

вы, вероятно, хотели больше походить на

export const TOKEN_KEY = 'some-string';

.

Вы используете объект localStorage в качестве ключа, что не имеет смысла, но приведение типов в javascript преобразует его в '[object Storage]'.

Пара ключ-значение '[object Storage]' и undefined в вашем localStorage показывает, что токен сохранен правильно. Заголовок Authorization: Bearer undefined показывает, что токен также правильно включен в ваши запросы. Токен просто получился undefined.