Блог

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

Загрузка файла

 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 amp;amp; <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"
  }
}
  

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

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

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

 export const TOKEN_KEY = localStorage;
  

вероятно, вы имели в виду, что это больше похоже на

 export const TOKEN_KEY = 'some-string';
  

.

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

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