登录（二）账号和密码——token值：保存-window.localStorage.setItem(‘token‘, token)&查看-sessionStorage.getItem(‘token‘）

基本功能——账号和密码 & 登录成功后——保存token值-window.localStorage.setItem(‘token’, body.token) & 查看token值-sessionStorage.getItem(‘mytoken’）

1. 添加状态：username（账号） 和 password（密码）
2. 使用受控组件方式获取表单元素值(value+onChange)
3. 给 form 表单添加 onSubmit。
4. 创建方法 handleSubmit，实现表单提交。
5. 在方法中，通过 username 和 password 获取到账号和密码。
6. 使用 API 调用登录接口，将 username 和 password 作为参数。
7. 判断返回值 status 为 200 时，表示登录成功。
8. 登录成功后，将 token 保存到本地存储中（hkzf_token）。
9. 返回登录前的页面。

  handleLogin = async e => {
    e.preventDefault()
    const { username, password } = this.state
    const res = await axios.post(`http://localhost:8080/user/login`, {
      username,
      password
    })
    // console.log(res)
    const { status, body, description } = res.data
    if (status === 200) {
      window.localStorage.setItem('token', body.token)
      this.props.history.push('/')
    } else {
      Toast.info(description, 1)
    }
  }

实例代码

  handleSubmit = async () => {
    // 控制表单提交
    let res = await axios.post('/user/login', {
      username: this.state.username,
      password: this.state.password
    })
    let { body, description, status } = res
    if (status === 200) {
      // 登录成功，缓存token,跳转到主页
      sessionStorage.setItem('mytoken', body.token)
      this.props.history.push('/home')
    } else {
      Toast.info(description)
    }
  }

登录接口数据获取

登录token查看