一、前端登录注册界面布局
借助Antd的 表单组件（登录框） 可以快速实现。
二、注册接口开发
1、JWT简介
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。
注册必然要产生token，这是用户的登录凭证。JWT的官网地址：https://jwt.io/。
一个JWT实际上就是一个字符串，它由三部分组成，头部、载荷与签名。
2、Koa中生成token
a. 安装
$ npm i jsonwebtoken -S
b. 生成token
const jwt = require('jsonwebtoken');
// 根据username和password生成token
let token=jwt.sign(
{username,password}, // 携带信息
'zhaowenxian', // 秘钥
{expiresIn:'1h'} // 有效期：1h一小时
)
expiresIn：以秒表示或描述时间跨度zeit/ms的字符串。如60，"2 days"，"10h"，"7d"，Expiration time，过期时间
更多字段可参考：https://blog.csdn.net/weixin_34314962/article/details/89057225
3、鉴权
已经产生了token，前端调用接口时传过来的token，就需要后端进行比较，我们称之为 鉴权 。
//鉴权
const auth=async (ctx,next)=>{
try{
// let result = jwt.verify(token,'zhaowenxian')//解构
jwt.verify(token,'zhaowenxian')//验证
}catch(err){
//try中报错就会走catch，
ctx.body={
code:500,
message: "token无效或登录已过期"
}
return;
}
await next();//放行函数，继续往下走
}
router.get('/api/edit',auth,async (ctx,next)=>{//在参数里执行
//需要权限才加auth，没有next（）放行函数，不会往下走
ctx.body={
code:200
}
})
三、Koa获取请求体
Koa获取请求体的方式是使用第三方插件：
然后在 app.js 中直接引入并调用：
const bodyParser = require('koa-bodyparser');
// 调用router中间件
app.use(bodyParser()); // bodyParser
app.use(router.routes(), router.allowedMethods());
四、Axios+TS的请求封装
前端React管理系统项目使用Axios进行请求，封装的过程结合ts使用。
在 src 下创建 request/api.ts 与 request/request.ts。
1、封装request
import axios from 'axios'
// 配置项接口
interface AxiosOption {
baseURL: string;
timeout: number;
}
// 配置项
const axiosOption: AxiosOption = {
baseURL: 'http://localhost:9000/manage',
timeout: 5000
}
// 创建一个单例
const instance = axios.create(axiosOption);
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
let token = localStorage.getItem("x-auth-token");
if (token) {
config.headers = {
"x-auth-token": token
}
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance;
2、导出api
在 api.ts 中：
import request from './request'
interface IRegisterParams {
username: string | number;
password: string | number;
}
// 注册
export const RegisterApi = (params: IRegisterParams) => request.post('/register', params)
3、调用api
import { RegisterApi } from "request/api";
import { message } from 'antd';
interface IValues {
username: string | number;
password: string | number;
}
// 执行注册
const onFinish = (values: IValues) => {
RegisterApi(values).then((res: any) => {
if(res.errCode===0){
message.success(res.message);
}else{
message.error(res.message);
}
});
};
五、接口文档
小幺鸡（docway）平台：http://xiaoyaoji.cn/
六、React Redux管理用户信息
首先，安装redux与react-redux：
$ npm i redux react-redux
1、reducer
在 src 下新建 store/reducer.ts：
interface IState {
username: string;
player: string;
avatar: string;
}
// 定义默认数据
const defaultState: IState = {
username: "",
player: "",
avatar: "",
};
interface IAction {
type: string;
value?: unknown;
}
// eslint-disable-next-line
export default (state = defaultState, action: IAction) => {
let newState = JSON.parse(JSON.stringify(state));
switch (action.type) {
case "ChangeUsername": // 修改名称
newState.username = action.value;
break;
case "ChangePlayer": // 修改角色
newState.player = action.value;
break;
case "ChangeAvatar": // 修改头像
newState.avatar = action.value;
break;
default:
break;
}
return newState;
};
2、store
在 src 下新建 store/index.ts ：
import { createStore } from "redux";
import reducer from './reducer'
const store = createStore(reducer)
export default store;
3、调用
组件中使用connect进行调用：
import { connect } from "react-redux";
const mapStateToProps = (state: IState) => {
return {
userName: state.username,
avatar: state.avatar,
};
};
const mapDispatchToProps = (dispatch: any) => {
return {
// 修改react-redux的用户名
changeUsername<T>(value: T):void{
dispatch({type: "ChangeUsername", value})
},
// 修改react-redux的密码
changePlayer<T>(value: T):void{
dispatch({type: "ChangePlayer", value})
},
// 修改react-redux的头像
changeAvatar<T>(value: T):void{
dispatch({type: "ChangeAvatar", value})
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(组件名称);
七、React环境变量配置
React的环境变量配置可以通过.env文件进行配置，建议使用插件配合。
1、cross-env插件
$ npm install --save-dev cross-env
然后打开 config/env.js，搜索 getClientEnvironment ，在其中添加：
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
...
SERVER_HOST_PORT: process.env.SERVER_HOST_PORT, // 添加这一句
SERVER_HOST: process.env.SERVER_HOST // 添加这一句
}
);
return { raw, stringified };
}
然后在项目根目录新建两个文件：
.env 开发环境：
NODE_ENV = development
SERVER_HOST_PORT = http://localhost:9000/manage
SERVER_HOST = http://localhost:9000
.env.production 生产环境：
NODE_ENV = production
SERVER_HOST_PORT = 线上真实接口地址
SERVER_HOST = 线上真实项目
2、项目运行、测试与打包
当你运行 npm start 时，它总是等于 'development' ，
当你运行 npm test 它总是等于 'test' ，
当你运行 npm run build 来生成一个生产 bundle(包) 时，它总是等于 'production'
