React实现登录功能

由于水平有限，正在不断学习中，在本文中，将使用自己已知的知识，实现React登录功能。

第一步：解决跨域。

（一） 安装：http-proxy-middleware

npm i http-proxy-middleware

（二） 新建setupProxy.js

const {createProxyMiddleware} = require('http-proxy-middleware');

//配置多个跨域请求
module.exports = function(app){
	app.use(createProxyMiddleware('/devApi',{
        target:'http://xxx.xxx.x.xxx:xxxx', //配置你要请求的服务器地址
        //http://api/react/login/
        changeOrigin:true,    //允许跨域请求
        pathRewrite:{
            "^/devApi":""
        }
    }))

    //1.匹配到devapi，开始做代理  http://xxx.xxx.x:xxxx/api/react
    //2./devApi/login/   =>  /login/        http://xxx.xxx.x:xxxx/api/react/login/
}

第二步：创建接口文件

例：accout.js

import service from '../utils/request'

//根据官方文档的“请求配置”
//登录接口
export function Login(data){
    return service.request({
        //根据接口写
        // url:"/devApi/login",
        url:"/login",
        method:"post",
        data:data         //请求类型为 post 时
        //params:data       请求类型为 get 时
    })
}

第三步：在对应文件中使用

例如：登录页面，login.js

import React, { Component } from 'react'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'; 

//引入接口文档   API 
import {Login} from '../../api/accout'


//白名单
import {withRouter} from 'react-router-dom'

 class LoginMain extends Component {

  //完整的网络请求
  onFinish = values => {
    // console.log('数据：'+JSON.stringify(values))
    Login({
      name:values.name,
      password:values.password
    }).then(res => {
      //用res（服务器）里的数据
      console.log('服务器',res)
      if (res.status === 200) {
        if (res.data.code === 0) {
          // console.log('服务器内用户信息',res.data.data.name)

          //设置存储,把用户名存储在key中
          localStorage.setItem("key", res.data.data.name);
          
          //把用户名存储在key中
          // console.log(localStorage.setItem("key", values.name))
          //路由跳转
          this.props.history.push('/admin');
        } else {
          message.error('服务器错误',res.data.message)
        }
      } else {
        message.info("网络错误")
      }
    }).catch(err => {
      console.log(err)
    })
  };

  
  render() {
    return (
      <div>
        <div className="login-header" sytle={{height:'56px',width:'300px'}}>
              <h2 style={{textAlign:'center',color:'#fff'}}>欢迎登录</h2>
        </div>
            
        <div className="form-content" style={{width:'300px'}}>
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{
                remember: true,
              }}
              onFinish={this.onFinish}
            >

              <Form.Item
                name="name"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Username!',
                  },
                ]}
              >
                  <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
              </Form.Item>

              
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Password!',
                  },
                ]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="Password"
                />
              </Form.Item>
              

              <Form.Item>
                <Button type="primary" htmlType="submit" style={{float:'left'}}>
                  登录
                </Button>
              </Form.Item>
    
            </Form>
          </div>
      </div>
    )
  }
}

export default withRouter(LoginMain);