javascript - 在组件上拆分身份验证工作流程示例(ReactJS)

Question

我对 Reactjs 很陌生，出于学习目的，我尝试将示例( https://reacttraining.com/react-router/web/example/auth-workflow )拆分为多个组件。我已将 Login 组件提取到单个文件中，现在我有 3 个文件:

index.js:

import React from 'react';
import { render } from 'react-dom';
import { ReactRouter } from 'react-router-dom';
import { AuthExample } from './containers/AuthExample';

render(<AuthExample/>, window.document.getElementById('app'));

AuthExample.js:

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    withRouter
} from 'react-router-dom'
import {Login} from '../components/Login'

////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time

export class AuthExample extends React.Component {

    render() {
        return (<Router>
            <div>
                <AuthButton/>
                <ul>
                    <li><Link to="/public">Public Page</Link></li>
                    <li><Link to="/protected">Protected Page</Link></li>
                </ul>
                <Route path="/public" component={Public}/>
                <Route path="/login" component={Login}/>
                <PrivateRoute path="/protected" component={Protected}/>
            </div>
        </Router>)
    }
}

export const fakeAuth = {
    isAuthenticated: false,
    authenticate(cb) {
        this.isAuthenticated = true
        setTimeout(cb, 100) // fake async
    },
    signout(cb) {
        this.isAuthenticated = false
        setTimeout(cb, 100)
    }
}

const AuthButton = withRouter(({history}) => (
    fakeAuth.isAuthenticated ? (
        <p>
            Welcome!
            <button onClick={() => {
                fakeAuth.signout(() => history.push('/'))
            }}>Sign out
            </button>
        </p>
    ) : (
        <p>You are not logged in.</p>
    )
))

const PrivateRoute = ({component: Component, ...rest}) => (
    <Route {...rest} render={props => (
        fakeAuth.isAuthenticated ? (
            <Component {...props}/>
        ) : (
            <Redirect to={{
                pathname: '/login',
                state: {from: props.location}
            }}/>
        )
    )}/>
)

const Public = () => <h3>Public</h3>
const Protected = () => <h3>Protected</h3>

export default AuthExample

Login.js:

import React from 'react'

export class Login extends React.Component {
    state = {
        redirectToReferrer: false
    }

    login = () => {
        fakeAuth.authenticate(() => {
            this.setState({redirectToReferrer: true})
        })
    }

    render() {
        const {from} = this.props.location.state || {from: {pathname: '/'}}
        const {redirectToReferrer} = this.state

        if (redirectToReferrer) {
            return (
                <Redirect to={from}/>
            )
        }

        return (
            <div>
                <p>You must log in to view the page at {from.pathname}</p>
                <button onClick={this.login}>Log in</button>
            </div>
        )
    }
}

申请开始顺利，但是当我去http://localhost:8080/login时并按下按钮登录，我收到错误:

Uncaught ReferenceError: fakeAuth is not defined

我该如何解决这个问题？也许我应该为此使用一些特殊的技术？

Answer 1

You forgot to import 'fakeAuth' in your Login component.

import {fakeAuth} from './AuthExample';