番茄闹钟三(登录注册页面)

• axios 文档
• 配置 axios
  • 配置 appid 和 appsecret
  • 配置 gwt 验证的 gwt token

  yarn add axios

import axios from 'axios'
const appID = "PzutokfofqknrEzTaJUBkmJA"
const appSecret = "GUxobVHJT88pGFeDLtBpyT3D"

const instance = axios.create({
baseURL: 'https://gp-server.hunger-valley.com/',
headers: {
  't-app-id' : appID,
  't-app-secret': appSecret
}
});

• interceptors 的作用是，比如发起请求的时候在参数上再加点东西。response 也是在 response 的时候先拿一点数据，然后再走到 axios,then 的那一步

// axios.ts
import axios from 'axios'

const appID = 'PzutokfofqknrEzTaJUBkmJA'
const appSecret = 'GUxobVHJT88pGFeDLtBpyT3D'

const instance = axios.create({
  baseURL: 'https://gp-server.hunger-valley.com/',
  headers: {
    't-app-id': appID,
    't-app-secret': appSecret
  }
})

instance.interceptors.request.use(function (config) {
  const xToken = localStorage.getItem('x-token')
  if (xToken) {
    config.headers['Authorization'] = `Bearer ${xToken}`
  }
  return config
}, function (error) {
  console.error(error)
  return Promise.reject(error)
})


instance.interceptors.response.use(function (response) {
  if (response.headers['x-token']) {
    localStorage.setItem('x-token', response.headers['x-token'])
  }
  return response
}, function (error) {
  return Promise.reject(error)
})

export default instance

import * as React from 'react';
import { Input,Icon,Button } from 'antd';
import axios from '../../../src/config/axios'

interface ISignUpState { // 如果不声明会报Property 'account' does not exist on type 'Readonly<{}>'.的错误
  account: string,
  password: string,
  passwordConformation: string
}

class SignUp extends React.Component { // 第一个参数声明prop的类型，第二个参数声明state的类型
  constructor(props:any){
    super(props)
    this.state = {
      account: '',
      password: '',
      passwordConformation: ''
    }
  }

  onChangeAccount = (e:any) => {
    this.setState({account: e.target.value})
  }

  onChangePassword = (e:any) => {
    this.setState({password: e.target.value})
  }

  onChangePasswordConformation = (e:any) => {
    this.setState({passwordConformation: e.target.value})
  }

  submit = async () => {
    const { account,password,passwordConformation } = this.state;
    try{
      await axios.post('sign_up/user',{
 account,
 password_/confirm/iation:passwordConformation,
 password
      })
      console.log('成功')
    }catch (e) {
      throw new Error(e)
    }
  }

  public render() {
    const { account,password,passwordConformation } = this.state;
    return (
      
 }
   value = {account}
   onChange={this.onChangeAccount}
 />
 
 
 注册
 

      
    )
  }
}

export default SignUp

//import {link} from 'react-router-dom'
登录

#SignUp{
  max-width: 500px;
  margin: auto;
  padding: 50px 0;
  >*{
    margin: 10px 0;
  }
  >h1{
    text-align: center;
  }
  >.loginButton{
    width: 100%;
  }
}

#SignUp{
  max-width: 500px;
  margin: auto;
  padding: 50px 0;
  >*{
    margin: 10px 0;
  }
  >h1{
    text-align: center;
  }
  >.loginButton{
    width: 100%;
  }
}

interface ILoginState {
  account?: string,
  password?: string
}
onChange = (key: keyof ILoginState,value:string) => {
  this.setState({[key]:value})
}

到了首页检查用户登录信息，如果可以登录就直接登录，如果不能登录也就是token是过期的话，我们就跳转到登录页
// Index.ts
getMe = async () => {
    try{
      const response = await axios.get('me')
      this.setState({user: response.data})
    }catch (e) {
      console.error('获取用户失败')
      if(e.response.status === 401){
 this.props.history.push('/login')
      }
    }
  }

// 服务器约定，凡是用户获取失败，返回状态都是401
instance.interceptors.response.use(function (response) {
  if (response.headers['x-token']) {
    localStorage.setItem('x-token', response.headers['x-token'])
  }
  return response
}, function (error) {
  window.location.href='/login' // 页面会再次跳转,粗暴的方式
  return Promise.reject(error)
})
// 通过react Router的方式，不会刷新
// 封装history.ts
import { createBrowserHistory } from 'history';
const history = createBrowserHistory()

export default  history

// 解决app.tsx没监听到组件的变化问题
import history from './config/history'
class Component extends React.Component  {
  public render(){
    return (
      
 
   
   
   
 
      
    )
  }
}
export default Component