Question

这是我有史以来第一个问题，请尽我所能。

我尽了一切努力，但我已经放弃了。

所以基本上我正在使用react-router v4处理受保护的路由。看了泰勒·麦金尼斯（Tyler Mcginnis）的PrivateRoute之后，我以为我走了正确的路，但是没有。

我可以使用isAuthenticated: true函数正确设置requireUser，但是PrivateRoute路由组件从不呈现。它总是重定向到/login。经过进一步调查，我意识到页面会以某种方式刷新，因此将isAuthenticated设置回false

另外，我没有使用Redux。

OH，欢迎对我的代码提出批评的人。

请帮助

/App.js

class App extends Component {
constructor() {
    super()
    this.state = {
      isAuthenticated: false,
      user: {
        username: ''
      }
    }
  }
  requireUser = (userData) => {
    console.log('userData', userData);
    if(userData) {
      this.setState({
        isAuthenticated: true,
        user: {
          username: userData.username
        }
      })
    }
  }  

  render() {
    return (
      <Router>
        <div>
          <Navbar />

          <Route exact path='/' component={Landing} />
          <Route path='/register' component={Register} />
          <Route path='/login' render={(props) => {
            return <Login {...props} requireUser={this.requireUser} />
          }} />
          <PrivateRoute path='/search' component={SearchBar} auth={this.state.isAuthenticated} />
        </div>
      </Router>
    );
  }
}

export default App;

/PrivateRoute.js

import React from 'react'
import { Route, Redirect } from 'react-router-dom'

const PrivateRoute = ({ component: Component, auth, path, ...rest}) => {
  return <Route {...rest} path='/search'  render={(props) => {
    console.log(auth);
    if(auth) {
      return (
        <Component {...props} />
      )
    } else {
      return (
        <Redirect to='/login' />
      )
    }
  }} />
}

export default PrivateRoute

编辑：已添加到我的登录组件

更新：我最终在this.props.history.push('/search)函数中添加了handleOnSubmit

/Login.js

import React, { Component } from 'react'
import axios from 'axios'
import jwt_decode from 'jwt-decode'

class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: '',
    }
  }

  handleOnChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleOnSubmit = (e) => {
    // prevent page refresh
    e.preventDefault()
    // destructure state
    const { email, password } = this.state
    // assign to userData
    const userData = { email, password }
    // axios post /api/users/login
    axios
      .post('/api/users/login', userData)
      .then((response) => {
        // destructure
        const { token } = response.data
        const decoded = jwt_decode(token)
        this.props.requireUser(decoded)
      })
      .catch((error) => {
        console.log(error);
      })
  }

  render() {
    return (
      <section className="section">
        <div className="container">
          <form>
            <div className="field">
              <label className="label">Email</label>
                <div className="control">
                  <input 
                      type="email" 
                      placeholder="email"   
                      className="input" 
                      name='email'
                      onChange={this.handleOnChange}
                  />
                </div>
            </div>
            <div className="field">
              <label className="label">Password</label>
              <input 
                type="password" 
                placeholder="password" 
                className="input" 
                name='password'
                onChange={this.handleOnChange}
              />
            </div>
            <div className="field">
              <div className="control">
                <button 
                  onClick={this.handleOnSubmit}
                  type="submit" 
                  className="button is-primary"
                >Log In</button>
              </div>
            </div>
          </form>
        </div>
      </section>
    )
  }
}

export default Login

Answer 1

您的代码看起来不错。问题是，当您将地址栏手动更改为/search时，将刷新浏览器。没有办法解决。

您也可以使用to道具值为'/search'的{{3}}组件，用户可以使用它来导航到搜索，或者可以通过{ {1}}个对象。

history

React Router v4：自定义PrivateRoute组件不断重新加载

1 个答案: