(四) beego开发web应用 – 基于React的登录页面和Token的使用

源码：https://github.com/Nicolana/hello-bee/tree/main

React开发登录页面

创建React应用

我写的是后台管理的这么一个web应用，那就叫 bee-admin-front吧，简单明白，beego开发的admin系统的前端。

官网给的创建方式：

npx create-react-app bee-admin-front
cd bee-admin-front
yarn start

然后我发现我创建的项目是JS的项目，我有点想学习一下TypeScript，所以我重新创建了一次

npx create-react-app bee-admin-front --template typescript
cd bee-admin-front
yarn start

访问命令行网址，出现下面的界面，创建OK~

还是得找个UI库(Ant design react)

安装

yarn add antd

导入

修改 src/App.css，在文件顶部引入 antd 的样式。

@import '~antd/dist/antd.css';

测试

修改 src/App.tsx，引入 antd 的按钮组件。

import React from 'react';
import { Button } from "antd";
import './App.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Test Button</Button>
    </div>
  );
}

export default App;

然后查看，显示出来了，一切OK

Login页面

界面

代码如下：

import { Form, Input, Button, Checkbox } from 'antd';

const apiUrl = process.env.REACT_APP_API_URL

export const LoginScreen = () => {
    const onFinish = (values: any) => {
        console.log('Success:', values)
    }

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo)
    }

    return (
        <Form
            name="basic"

            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item
                label={"Username"}
                name={"username"}
                rules={[{ required: true, message: "Please input your username!"}]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label={"Password"}
                name={"password"}
                rules={[{ required: true, message: "Please input your password!"}]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item name="remember" valuePropName="checked">
                <Checkbox>Remember me</Checkbox>
            </Form.Item>
            <Form.Item>
                <Button type={"primary"} htmlType={"submit"}>Submit</Button>
            </Form.Item>
        </Form>
    )
}

请求

请求使用axios

yarn add axios

跨域配置

安装 http-proxy-middleware

yarn add http-proxy-middleware

配置：src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
const apiUrl = process.env.REACT_APP_API_URL

module.exports = function (app) {
    app.use(
        "/api",
        createProxyMiddleware({
            target: apiUrl,
            changeOrigin: true
        })
    )
}

.env.development

REACT_APP_API_URL=http://127.0.0.1:8888

修改后请求

引入axios后进行登录请求，然后判断登录状态，登录成功后在本地缓存token信息

import { Form, Input, Button, Checkbox, message } from 'antd';
import axios from 'axios';

export const LoginScreen = () => {
    const onFinish = (values: any) => {
        const data = {
            username: values.username,
            password: values.password
        }
        axios.post(`/api/user/login`, data).then(res => {
            const response = res.data
            if (response.status !== 0) {
                console.log(response)
                message.error(response.error_message)
            } else {
                message.success("登录成功: username = " + response.data.user_name, 2000)
                localStorage.setItem("userInfo", JSON.stringify(response.data))
            }
        })
    }

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo)
    }

    return (
        <Form
            name="basic"

            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item
                label={"Username"}
                name={"username"}
                rules={[{ required: true, message: "Please input your username!"}]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label={"Password"}
                name={"password"}
                rules={[{ required: true, message: "Please input your password!"}]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item name="remember" valuePropName="checked">
                <Checkbox>Remember me</Checkbox>
            </Form.Item>
            <Form.Item>
                <Button type={"primary"} htmlType={"submit"}>Submit</Button>
            </Form.Item>
        </Form>
    )
}

最终效果：

丑死了。。。

hhhh

后台访问接口登录判断

controllers/user.go 里面新增一个根据id获取用户的方法

func (this *UserController) GetOne() {
   token := this.Ctx.Input.Header("token")
   idStr := this.Ctx.Input.Param(":id")
   et := utils.EasyToken{}
   valid, err := et.ValidateToken(token)
   if !valid {
      this.Ctx.ResponseWriter.WriteHeader(401)
      this.Data["json"] = Response{401, 401, fmt.Sprintf("%s", err), ""}
      this.ServeJSON()
      return
   }
   id, _ := strconv.Atoi(idStr)
   v, err := models.GetUserById(id)
   if v == nil {
      this.Data["json"] = err.Error()
   } else {
      this.Data["json"] = v
   }
   this.ServeJSON()
}

其中回判断从Header 传来的Token 是否有效，无效时回返回未授权

前端，调用一下接口，并传递Token过去

const getInfo = (id: Number) => {
    axios.get('/api/user/' + id, {
        headers: {
            token: localStorage.getItem("token")
        }
    }).then(res => {
        console.log(res)
    })
}

搞定