Question

我正在将react-router v4和Redux用于新项目。

我有以下代码：

export class App extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(initAuth());
  }

  render() {
    const { user } = this.props;
    return (
      <BrowserRouter>
        <div>
          <NavContainer />
          <Match pattern="/login" component={LogInForm} />
          <MatchWhenAuthorized pattern='/users' component={Users} user={user} />
        </div>
      </BrowserRouter>
    );
  }
}

在initAuth调度检查localStorage中是否存在现有令牌的操作的情况下，如果存在，则也会调度logIn操作。

问题是，如果我直接转到myapp.com/users，操作还没有返回，所以没有用户登录，在这种情况下MatchWhenAuthorized将我重定向到我的LogInForm，如果我的话我不想要initAuth将用户登录。

有没有一种优雅的方法来解决这个问题？

我想我可以通过仅在用户登录时呈现MatchWhenAuthorized组件来解决它，但这似乎不正确。

Answer 1

应在加载页面时以及安装应用程序之前设置初始登录状态。我不确定为什么initAuth是一个redux动作创建者，只需检查localStorage而不涉及redux。

index.js

import { createStore } from 'redux'
import reducer from './reducer'
import { getUser } from './storage'

// load the user data from localStorage and
// use the value in the store's initial data
const store = createStore(reducer, {
  user: getUser()
})

然后，您可以将<MatchWhenAuthorized>组件连接到商店以访问user值，并在商店中没有用户时重定向。

React-Router v4和Redux身份验证

1 个答案:

index.js