Javascript 组件上的拆分身份验证工作流示例(ReactJS)
我对Reactjs非常陌生,为了便于学习,我尝试将example()拆分为几个组件。我在单个文件中提取了Javascript 组件上的拆分身份验证工作流示例(ReactJS),javascript,reactjs,react-router,Javascript,Reactjs,React Router,我对Reactjs非常陌生,为了便于学习,我尝试将example()拆分为几个组件。我在单个文件中提取了Login组件,现在我有3个文件: index.js: import React from 'react'; import { render } from 'react-dom'; import { ReactRouter } from 'react-router-dom'; import { AuthExample } from './containers/AuthExample'; re
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'));
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
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>
)
}
}
我怎样才能修好它?也许我应该用一些特殊的技巧
您忘记在登录组件中导入“fakeAuth”
您忘记在登录组件中导入“fakeAuth”
(脸掌)谢谢!(脸掌)谢谢!
Uncaught ReferenceError: fakeAuth is not defined
import {fakeAuth} from './AuthExample';