Question

我正在将我的应用程序从react-router-redux迁移到-> 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
第二次刷新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。

受保护的路由会从“ react-router-redux”切换为“ connected-react-router”

0 个答案: