Question

减速

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
import {
  LOGIN_USER_SUCCESS
} from '../actions/types';

const INITIAL_STATE = {
  error: '',
  message: '',
  content: '',
  authenticated: false,
  authenticating: false,
  username: '',
  fullName: '',
  password: '',
};

export default function(state = INITIAL_STATE, action) {
  console.log('anything?');
  switch (action.type) {
    case LOGIN_USER_SUCCESS:
      console.log(';', action.fullName);
      console.log(';;', action);
      console.log(state.fullName)
      return {
        ...state,
        fullName: action.fullName,
        username: action.username,
        password: action.password,
        authenticating: false,
        authenticated: true,
      };
  return state;
}

＆＃13;

＆＃13; 行动创造者

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import {
  LOGIN_USER_SUCCESS,
} from './types';

import axios from 'axios';
import cookie from 'react-cookie';
import Cookies from 'universal-cookie';
const cookies = new Cookies();

const API_URL = 'http://localhost:3001/api';

export const loginUser = (username, password) => {
  return function(dispatch) {
    axios
      .post(`${API_URL}/auth/login`, { username, password })
      .then(response => {
        cookies.set('token', response.data.token, { path: '/' });
        cookies.set('user', response.data.user, { path: '/' });
        console.log(cookies.get('user'));
        console.log(username);
        dispatch({
          type: LOGIN_USER_SUCCESS,
          fullName: response.data.user.fullName,
        });
        setTimeout(
          function() {
            //window.location.href = 'http://localhost:3000/auth/dashboard';
          },
          3000
        );
      });
    
  };
};

＆＃13;

如何在页面重定向时保持状态不丢失？似乎当我运行window.location.href时，我的页面刷新，这似乎导致了问题。

Answer 1

答案是不要那样做。响应中的刷新始终会导致完全状态丢失，因为脚本停止运行，页面重新加载并且脚本从初始状态再次启动。

通常通过发出ajax调用来获取凭据来实现登录方案，并且当凭据到达时，它们将存储在该状态中。

之后，您的组件将识别出存在凭据，并且您的组件将显示内容而不是登录。

这种情况通常通过使用反应伙伴库（如redux和react路由器）来实现。

Answer 2

我使用react-router来浏览您的应用而不是window.location.href。关于刷新，正如DavorinRuševljan所说，状态在React中总是丢失了。例如，您可以使用localStorage存储您的状态，并将其加载到ComponentWillMount中，然后再将其分发给您的州。

React新手。创建一个使用Passport + cookie验证用户身份的应用程序，我的状态在刷新时丢失

2 个答案: