在 LocalStorage react js 上保存身份验证数据

Question

我正在使用 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 && <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 传递给客户端，则应在 HTTP 响应的 set-cookie 标头下找到它。您可以在 axios 中以 response.headers['set-cookie'] 的身份访问它。由于标头的语法为key=value，因此可能需要进行一些进一步的解析。在您的情况下，它可能看起来像 token=1234567890abcdef。

请注意，您提供的示例响应似乎不包含此标头。您首先需要得到响应。

尽管存在可疑的错误，其余部分似乎仍在工作。在您的 Auth 文件中的第一行

export const TOKEN_KEY = localStorage;

你可能想要更像

export const TOKEN_KEY = 'some-string';

.

您使用 localStorage 对象作为键，这没有任何意义，但 javascript 的类型强制将其字符串化为 '[object Storage]'。

localStorage 中的键值对'[object Storage]' 和undefined 表明令牌保存正确。标头 Authorization: Bearer undefined 表明令牌也正确包含在您的请求中。令牌恰好是undefined。