尝试检查身份验证时表单未提交

时间:2019-01-05 14:13:33

标签: node.js reactjs authentication jwt material-ui

我有这个创建用户脚本,当我填写表单时,该脚本会引发错误,提示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

0 个答案:

没有答案