React+koa的登录

后端koa

下载 

 npm i koa koa-Router koa-body @koa/cors koa-bodyparser

 下载完之后，引入

 

const Koa = require("koa");

const Router = require("koa-Router");

const { koaBody } = require("koa-body");

const cors = require("@koa/cors");

const bodyParser = require("koa-bodyparser");

const app = new Koa();

const router = new Router();

app.use(cors());

app.use(koaBody({ multipart: true }));

app.use(bodyParser());

app.use(router);

router.post("/", (ctx) => {

 ctx.body={}

});

app.listen(3000, () => {

  console.log("端口启动成功...");

});

 要带有token的话

先下载

 npm i jsonwebtoken

 然后再使用 

var jwt = require('jsonwebtoken') 

 最后

 

jwt.sign({
  data: 'foobar'
}, 'secret', { expiresIn: '1h' });

koa的代码

const Koa = require("koa");
const Router = require("koa-Router");
const { koaBody } = require("koa-body");
const cors = require("@koa/cors");
const bodyParser = require("koa-bodyparser");
const jwt = require("jsonwebtoken");
const app = new Koa();
const router = new Router();
const data = [
  {
    username: "admin",
    password: "123456",
  },
  {
    username: "user",
    password: "123456",
  },
];
app.use(cors());
app.use(koaBody({ multipart: true }));
app.use(bodyParser());
app.use(router);
router.post("/api/login", (ctx) => {
  //检查有没有数据
  let { username, password } = ctx.request.body;
  let user = data.find((item) => item.username === username && item.password === password);
  if (user) {
    ctx.body = {
      code: 200,
      msg: "登录成功",
      token: jwt.sign({ data: "username" }, "username", { expiresIn: "1h" }),
    };
  } else {
    ctx.body = {
      code: 400,
      msg: "登录失败",
    };
  }
});
app.listen(3000, () => {
  console.log("端口启动成功...");
});

 前端

先下载

npm i react-vant

我用的是 ⚡️ 快速上手 - react vant (3lang.dev)https://react-vant.3lang.dev/guide/quickstart

 找到自己需要的组件，复制粘贴

import React from "react";
import { Button, Input, Form } from "react-vant";
const Login = () => {
  const [form] = Form.useForm();
  const onFinish = async (values) => {
    console.log(values);
  };
  return (
    <div className="login">
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: "16px 16px 0" }}>
            <Button round nativeType="submit" type="primary" block>
              提交
            </Button>
          </div>
        }
      >
        <Form.Item
          rules={[{ required: true, message: "请填写用户名" }]}
          name="username"
          label="用户名"
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          rules={[{ required: true, message: "请填写密码" }]}
          name="password"
          label="密码"
        >
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
};
export default Login;

接下来下载 axios

npm i axios

import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default axios;

现在就可以把后端的链接调用可以到前端

import axios from "../request/axios";
export const GETLOGIN=(values)=>{
        return axios({
        url: 'http://localhost:3000/api/login',
        method: 'POST',
        data:values
    })
}

 接下来就可以判断一下账号和密码是否正确了

import React from "react";
import { Button, Input, Form } from "react-vant";
import { GETLOGIN } from "../../api/login";
import { useNavigate } from "react-router-dom";
const Login = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const onFinish = async (values) => {
    console.log(values);
    let res = await GETLOGIN(values);
    if (res.data.code === 200) {
      alert("登录成功");
      localStorage.setItem("token", res.data.token);//存储token
      navigate("/home");//跳转到页面
    } else {
      alert("登录失败");
    }
  };
  return (
    <div className="login">
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: "16px 16px 0" }}>
            <Button round nativeType="submit" type="primary" block>
              提交
            </Button>
          </div>
        }
      >
        <Form.Item
          rules={[{ required: true, message: "请填写用户名" }]}
          name="username"
          label="用户名"
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          rules={[{ required: true, message: "请填写密码" }]}
          name="password"
          label="密码"
        >
          <Input placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
};
export default Login;