1

您好我有以下问题：

1.第一个问题

当用户登录到应用程序时，会触发函数async handleSubmitForm()。我正在尝试将令牌保存到 cookie 中（这只是临时解决方案......）调用方法setTokenInCookies。如果有我的 cookie，我会检查浏览器设置中的 cookie 并且它是！刷新页面后console.log(this.props.cookies)放在我的代码中的某处（例如在渲染方法中）给我 cookie 列表，其中不包含我的 cookie。

import { Cookies, withCookies } from "react-cookie";

 class LoginPage extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };
  constructor(props) {
    super(props);
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
    this.state = {
      token: props.cookies.get("token")
    };
  }

  setTokenInCookies(cookie, expires) {
    const { cookies } = this.props;
    const parseToDate = new Date(expires);
    cookies.set("token", cookie, { path: "/token", expires: parseToDate });
  }

  async handleSubmitForm(values) {
    const email = values.get("email");
    const password = values.get("password");
   
      const JSONLoginForm = JSON.stringify({ email, password });
      try {
        const response = await axios.post("/login", JSONLoginForm, config);
        console.log(response);
        const { data: { token: value, expiration: expires } } = response;
        this.setTokenInCookies(value, expires);
      } catch (error) {
        console.log("error", error);
      }
  }
  render() {
    return (
      <Panel>
        <LoginForm onSubmit={this.handleSubmitForm} />
        <Link to="/forgotten_password"> Forgot password </Link>
        <Link to="/signup">Sign Up</Link>
      </Panel>
    );
  }
}

function mapStateToProps() {
  return {};
}
function mapDispatchToProps() {
  return {};
}
const withCookieLoginPage = withCookies(LoginPage);

export default connect(mapStateToProps, mapDispatchToProps)(withCookieLoginPage);

2.第二个问题 我想访问不同组件中的cookie，但 console.log(this.props.cookies)给我未定义。

import React, { Component } from "react";
import styled, { ThemeProvider } from "styled-components";
import { Route } from "react-router-dom";
import { CookiesProvider, withCookies, Cookies } from "react-cookie";
import theme from "./themes/default";
import {instanceOf } from "prop-types";
import LoginPage from "./containers/LoginPage";
import ForgotPasswordPage from "./containers/ForgotPasswordPage";
import RegistrationPage from "./containers/RegistrationPage";
import WelcomePage from "./containers/WelcomePage";

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
`;

class App extends Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };
  render() {
    console.log(this.props.cookies);
    return (
      <CookiesProvider>
        <ThemeProvider theme={theme}>
          <Wrapper>
            <Route exact path="/" component={LoginPage} />
            <Route path="/signup" component={RegistrationPage} />
            <Route path="/forgotten_password" component={ForgotPasswordPage} />
            <Route path="/logged" component={WelcomePage} />
          </Wrapper>
        </ThemeProvider>
      </CookiesProvider>
    );
  }
}

export default withCookies(App);
4

1 回答 1

0

一些事情：

  • 您只需要在您的应用程序中导入 CookiesProvider。
  • 如果您在 App 中导入 withCookies() 的原因是为了打印 cookie，那么更好的方法是安装插件并直接从浏览器中检查它们。
  • 在 render() 中调用 log() 的位置不正确，因为您在 log() 调用之后返回 CookiesProvider（连同其余组件）。
  • 最后，我建议先尝试仅设置路径属性的 cookies.set() 调用，以确保它有效（实际上我自己也遇到了这个问题）。

希望这可以帮助。

于 2018-03-23T11:43:18.153 回答