Question

我试图在我的反应项目中设置登录功能，我在我的auth.js文件中创建了一个登录函数，如下所示：

export function login(data) {

const endpoint = 'http://127.0.0.1:8000/api/auth/jwt/'
const csrfToken = cookie.load('csrftoken')
let thisComp = this
if (csrfToken !== undefined) {
  let lookupOptions = {
      method: "POST",
      headers: {
          'Content-Type': 'application/json'

      },
      body: JSON.stringify(data),
      credentials: 'include'
  }

  fetch(endpoint, lookupOptions)
  .then(function(response){
      return response.json()
  }).then(function(responseData){
      console.log(responseData)
      localStorage.token = responseData.token
      localStorage.expires = responseData.expires // Store the token
      console.log("Token Stored", localStorage.token)
      console.log("Token Expires", responseData.expires)
      refreshToken(localStorage.token)



    }).catch(function(error){

      console.log("error", error)
  })
 }

}

然后我在我的Login组件中调用此函数，如下所示：

export class Login extends Component {

constructor(props){
 super(props)
 this.onSubmit = this.onSubmit.bind(this)
 this.handleInputChange = this.handleInputChange.bind(this)
 this.state = {
     username: null,
     password: null,

 }
 }

 onSubmit(event) {
  event.preventDefault()
  let data = this.state
  console.log(data)
  login(data)



  }

  handleInputChange(event){
   event.preventDefault()
   console.log(event.target.name, event.target.value)
   let key = event.target.name
   let value = event.target.value
   this.setState({
     [key]: value
  })
  }

  componentDidMount(){
   this.setState({
    username: null,
    password: null,

   })

   }

   render() {
      return (
        <div className="orderweb__432c603c" data- 
         reactid=".ovvy6jmxvk.2">
            <h1 className="ccl-2a4b5924e2237093 ccl-21bead492ce4ada2 
            ccl-99c566dc40a8a156 ccl-0338edd3d4c3a41b" data- 
            reactid=".ovvy6jmxvk.2.0">Welcome back</h1>
            <form  noValidate data-reactid=".ovvy6jmxvk.2.1" onSubmit= 
             {this.onSubmit}>
                <div className="ccl-b176b26fc7009752" data- 
                 reactid=".ovvy6jmxvk.2.1.1">
                    <label className="ccl-19882374e640f487 ccl- 
                     417df52a76832172 ccl-dfaaa1af6c70149c ccl- 
                     9d0a5327c911d0f3 ccl-094acd7546498021 ccl- 
                     b79f709a3ebf5895" htmlFor="login_email" data- 
                     reactid=".ovvy6jmxvk.2.1.1.0">Email address</label>
                    <div className="orderweb__15cc2e48" data- 
                    reactid=".ovvy6jmxvk.2.1.1.1"><input id='username' 
                    name='username' className="orderweb__e9fe3b76" 
                    placeholder="Username"  spellCheck="true" 
                    autoCorrect="on" required aria-invalid="false" aria- 
                    required="true" rows={1} data- 
                    reactid=".ovvy6jmxvk.2.1.1.1.0" onChange= 
                    {this.handleInputChange} /></div>
                </div>
                <div className="ccl-b176b26fc7009752" data-reactid=".ovvy6jmxvk.2.1.2">
                    <label className="ccl-19882374e640f487 ccl-417df52a76832172 ccl-dfaaa1af6c70149c ccl-9d0a5327c911d0f3 ccl-094acd7546498021 ccl-b79f709a3ebf5895" htmlFor="login_password" data-reactid=".ovvy6jmxvk.2.1.2.0">Password</label>
                    <div className="orderweb__15cc2e48" data-reactid=".ovvy6jmxvk.2.1.2.1"><input id='password' name='password' type="password" inputMode="password" className="orderweb__e9fe3b76" placeholder="Password" spellCheck="true" autoCorrect="on" required aria-invalid="false" aria-required="true" rows={1} data-reactid=".ovvy6jmxvk.2.1.2.1.0" onChange={this.handleInputChange}/></div>
                </div>
                <a href="/password_reset" className="orderweb__de36b0c3" data-reactid=".ovvy6jmxvk.2.1.3">Forgot password?</a><span className="ccl-67e0c7f3fe50cf69 ccl-a97a150ddadaa172 ccl-b176b26fc7009752" data-reactid=".ovvy6jmxvk.2.1.4"><button className="ccl-d0484b0360a2b432 ccl-233931c277401e86 ccl-ed9aadeaa18a9f19 ccl-a97a150ddadaa172" type="submit" tabIndex={0} data-reactid=".ovvy6jmxvk.2.1.4.0"><span className="ccl-cce251427bbe4ec4" data-reactid=".ovvy6jmxvk.2.1.4.0.1"><span data-reactid=".ovvy6jmxvk.2.1.4.0.1.1">Login</span></span></button></span>
                <p className="ccl-19882374e640f487 ccl-1daa0367dee37c3b ccl-dfaaa1af6c70149c ccl-b176b26fc7009752" data-reactid=".ovvy6jmxvk.2.1.5"><span data-reactid=".ovvy6jmxvk.2.1.5.0">Don't have an account yet?<br />Just place an order to create one.</span></p>
            </form>
        </div>
    );
}
}

export default Login

但是当我点击提交按钮时没有发生任何事情，我尝试使用console.log（Hello）这是工作，但那不是运行登录功能

Answer 1

在您的Login.js组件中：

import login from './auth'; //here route to your `auth.js`
export class Login extends Component {
..............................................................................

Answer 2

如果您使用浏览器本地存储

浏览器的窗口对象具有 localStrogae 属性。

所以你应该使用

window.localStroage.getItem("your_token_name");
window.localStroage.setItem("your_token_name",data); //data what you want to store

向here

学习

登录功能React Js

2 个答案: