当用户在浏览器选项卡中手动更改URL时,防止在React中进行路由

Question

当用户在浏览器选项卡中手动更改路径并按Enter键时,我遇到了问题.这会强制我的反应路由器导航到用户输入的状态.我想阻止这种情况,并且只允许通过我在网站上点击按钮实现的流程进行路由.

我的某些屏幕需要的数据仅在用户使用预期的流量导航网站时才可用.如果用户通过手动更改URL中的路径直接尝试导航到特定路线,那么他可能会跳过所需的流程,因此应用程序将中断.

其他情况,如果我想限制一些用户访问某些路由,但用户知道路径并在浏览器URL中手动输入,那么他将被呈现该屏幕,但不应该.

Answer 1

我所做的是使用上一页的道具，如果该道具未定义（意味着用户没有遵循正当程序：）呵呵）我只是将用户发送回登录页面或任何地方。

Answer 2

您可以使用 HOC 创建路由防护。例如，您不希望未经授权的用户通过route /profile，那么您可以执行以下操作：

// requireAuthorized.js (HOC)
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'

const connector = connect(
  state => ({
    isAuthorized: state.profile !== null // say, you keep user profile in redux
  })
)

export default (WrappedComponent) => {
  return (
    connector(
      class extends Component {
        static propTypes = {
          isAuthorized: PropTypes.bool.isRequired
        }

        render () {
          const {isAuthorized, ...clearedProps} = this.props
          if (isAuthorized) {
            return <WrappedComponent {...clearedProps} />
          } else {
            return <Redirect to={{pathname: '/login'}} />
          }
        }
      }
    )
  )
}


// ProfilePage.jsx
import React from 'react'
...
import requireAdmin from '../hocs/requireAdmin' // adjust path

class ProfilePage extends React.Component {
  ...
  render () {
    return (
      <div>
        ...
      </div>
    )
  }
}

export default requireAdmin(ProfilePage)

注意我的出口声明ProfilePage.js