2

我正在将我的应用程序迁移到 from react-router-redux -to -->connected-react-router但是，我遇到了一个问题。目前，我有某些受保护的路线（需要经过身份验证的用户），即仪表板

export default function Routes(props, context) {
  return (
    <Switch>
      <Route exact path="/" component={Login} />
      <Route path="/login" component={Login} />
      <Route
        render={props => <Authorization {...props} routes={AuthRoutes} />}
      />
    </Switch>
  )
}



const AuthRoutes = [
  <Switch>
    <Route path="/dashboard" component={Dashboard} />,
    <Route component={Error404} />
  </Switch>,
]

授权组件如下所示：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Redirect, withRouter } from 'react-router'

class Authorization extends Component {
  isAuthenticated() {
    const { auth, app } = this.props
    const { search } = app
    console.log('====================================')
    console.log('Auth:', auth)
    console.log('====================================')
    if (auth && auth.token) {
      return this.props.routes.map((route, index) =>
        React.cloneElement(route, { key: index })
      )
    } else {
      return <Redirect to={{ pathname: '/login', search }} />
    }
  }
  render() {
    return <div style={{ width: '100%' }}>{this.isAuthenticated()}</div>
  }
}

export default connect(state => ({
  auth: state.auth,
  app: state.app,
}))(withRouter(Authorization))

用户登录后，他被定向到/dashboard路径并token保存到 redux 存储中的 auth（持久存储到 localStorage）。

问题：

  • 在第一次刷新页面时，console.log 语句（来自授权）输出，Auth: {token: null}用户重定向到 /login
  • 在第 2 次刷新 console.log 语句（来自授权）时输出，Auth: {token: <userToken>}用户重定向到 /dashboard （正确的行为）
  • 在第 3 次刷新 console.log 语句（来自授权）输出该内容Auth: {token: null}并将用户重定向到/login
  • 在第 4 次刷新 console.log 语句（来自授权）时输出，Auth: {token: <userToken>}用户重定向到 /dashboard （正确的行为）

注意到一个模式了吗？似乎每隔一个Authorization页面刷新上的组件在 它有时间从本地存储恢复之前访问身份验证状态。

如果我恢复使用 ，则登录后每次刷新页面时都会react-router-redux将用户重定向到正确的位置。/dashboard

4

0 回答 0