Question

我已经尝试了几个小时，但不确定自己做错了什么，但是我使用此Auth路由尝试进行一些基本的JWT验证，但我的this.props.history尚未定义componentDidMount方法。这是我的Auth组件。

import React, { Component } from 'react';
import { getJwt } from '../helpers/jwt';
import axios from 'axios';
import { withRouter } from 'react-router-dom';

class Auth extends Component {

    constructor(props) {
        super(props)
        this.state = {
            user: undefined
        }
    }

    componentDidMount() {
        const jwt = getJwt();
        if (!jwt) {
            this.props.history.push('/login');
        }
        axios.get('/auth/getUser', { headers: { Authorization: `Bearer ${jwt}` } })
            .then(res => res.setState({
                user: res.data
            }))
            .catch(err => {
                localStorage.removeItem('jwt');
                this.props.push('/login')
            })
    }

    render() {
        if (this.state.user === undefined) {
            return (
                <h1>Loading...</h1>
            )
        }
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
    }

export default withRouter(Auth);

我正在尝试对该路线进行基本验证。

这是我的App.js

      <BrowserRouter>
    <React.Suspense fallback={loading()}>
      <Switch>
        <Route exact path="/login" name="Login Page" render={props => <Login {...props} />} />
        <Route exact path="/register" name="Register Page" render={props => <Register {...props} />} />
        <Route exact path="/404" name="Page 404" render={props => <Page404 {...props} />} />
        <Route exact path="/500" name="Page 500" render={props => <Page500 {...props} />} />
        <Auth>
          <Route path="/" name="Home" render={props => <DefaultLayout {...props} />} />
        </Auth>
      </Switch>
    </React.Suspense>
  </BrowserRouter>

我有一个带有Auth的包装器。基本上验证用户是否可以输入本地路线。

我怎样才能在history.push（）里面componentDidMount？

0 个答案: