我有这个创建用户脚本,当我填写表单时,该脚本会引发错误,提示ReferenceError: auth is not defined
。
该脚本是基于其他几个我都可以正常工作的脚本而设计的。如果我删除任何尝试进行身份验证的脚本,只要我也从路由中删除参数,该脚本也将起作用。我的代码中是否缺少任何内容或不正确?
import React, {Component} from 'react'
import Card, {CardActions, CardContent} from 'material-ui/Card'
import Button from 'material-ui/Button'
import TextField from 'material-ui/TextField'
import Typography from 'material-ui/Typography'
import Icon from 'material-ui/Icon'
import PropTypes from 'prop-types'
import {withStyles} from 'material-ui/styles'
import {create} from './api-user.js'
import Dialog, {DialogActions, DialogContent, DialogContentText, DialogTitle} from 'material-ui/Dialog'
import {Redirect, Link} from 'react-router-dom'
import auth from './../auth/auth-helper'
const styles = theme => ({
card: {
maxWidth: 600,
margin: 'auto',
textAlign: 'center',
marginTop: theme.spacing.unit * 5,
paddingBottom: theme.spacing.unit * 2
},
error: {
verticalAlign: 'middle'
},
title: {
marginTop: theme.spacing.unit * 2,
color: theme.palette.openTitle
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 300
},
submit: {
margin: 'auto',
marginBottom: theme.spacing.unit * 2
}
})
class Signup extends Component {
state = {
name: '',
password: '',
password2: '',
email: '',
open: false,
error: ''
}
componentDidMount = () => {
this.postData = new FormData()
const jwt = auth.isAuthenticated()
this.setState({user: auth.isAuthenticated().user})
}
clickSubmit = () => {
const jwt = auth.isAuthenticated()
const user = {
name: this.state.name || undefined,
email: this.state.email || undefined,
password: this.state.password || undefined,
password2: this.state.password2 || undefined
}
if(this.state.password !== this.state.password2) {
this.setState({
error: "Passwords don't match"
})
next()
} else {
create({
userId: this.match.params.userId
}, {
t: jwt.token
}, user).then((data) => {
if (data.error) {
this.setState({error: data.error})
} else {
this.setState({error: '', open: true})
}
})
}
}
handleChange = name => event => {
this.userData.set(name, value)
this.setState({[name]: event.target.value})
}
render() {
const {classes} = this.props
const redirectToSignin = this.state.redirectToSignin
if (redirectToSignin) {
return <Redirect to='/signin'/>
}
return (<div>
<Card className={classes.card}>
<CardContent>
<Typography type="headline" component="h2" className={classes.title}>
Sign Up
</Typography>
<TextField id="name" label="Name" className={classes.textField} value={this.state.name} onChange={this.handleChange('name')} margin="normal"/><br/>
<TextField id="email" type="email" label="Email" className={classes.textField} value={this.state.email} onChange={this.handleChange('email')} margin="normal"/><br/>
<TextField id="password" type="password" label="Password" className={classes.textField} value={this.state.password} onChange={this.handleChange('password')} margin="normal"/><br/>
<TextField id="password2" type="password" label="Re-enter Password" className={classes.textField} value={this.state.password2} onChange={this.handleChange('password2')} margin="normal"/>
<br/> {
this.state.error && (<Typography component="p" color="error">
<Icon color="error" className={classes.error}>error</Icon>
{this.state.error}</Typography>)
}
</CardContent>
<CardActions>
<Button color="primary" variant="raised" onKeyPress={(e) => {
if (e.key === 'Enter') {
console.log('Enter key pressed');
e.clickSubmit
// write your functionality here
}}
}onClick={this.clickSubmit} className={classes.submit}>Submit</Button>
</CardActions>
</Card>
<Dialog open={this.state.open} disableBackdropClick={true}>
<DialogTitle>New Account</DialogTitle>
<DialogContent>
<DialogContentText>
New account successfully created.
</DialogContentText>
</DialogContent>
<DialogActions>
<Link to="/">
<Button color="primary" autoFocus="autoFocus" variant="raised">
OK
</Button>
</Link>
</DialogActions>
</Dialog>
</div>)
}
}
Signup.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styles)(Signup)
其他信息
auth-helper.js
import { signout } from './api-auth.js'
const auth = {
isAuthenticated() {
if (typeof window == "undefined")
return false
if (sessionStorage.getItem('jwt'))
return JSON.parse(sessionStorage.getItem('jwt'))
else
return false
},
authenticate(jwt, cb) {
if (typeof window !== "undefined")
sessionStorage.setItem('jwt', JSON.stringify(jwt))
cb()
},
signout(cb) {
if (typeof window !== "undefined")
sessionStorage.removeItem('jwt')
cb()
//optional
signout().then((data) => {
document.cookie = "t=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
})
}
}
export default auth