Ant Design Pro快速入门——数据管理

纯前端菜鸡，只有一些HTML、CSS和JavaScript的基础，最近配合的前端跑路了，想用Ant Design Pro来快速搭建一套中后台来管理数据，只能自己上了，主要自己也想试试水，从后端的视角看前端，整体偏向于实战。

数据管理

简易数据流

关于建议数据流，按照其官方的说法是一种轻量级的全局数据共享的方案，比如：

1. 新建Model

在src/models下新建counter.ts，内容如下：

import { useState } from "react";

export default ()=>{
  const[count,setCount]=useState(0);
  const increment=()=>setCount(count+1);

  return {count,increment};
};

2. 使用Model

在代码中使用model，在src/pages/OK.tsx中引入useModel，并使用useModel来获取model，示例代码如下：

import React from 'react';
import { useModel } from 'umi';
const OKPage: React.FC = () => {
  const { count, increment } = useModel('counter');
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
export default OKPage;

在多个页面引入<OKPage/>，我们会发现这个count的数值会在各个页面中共享。这里有必要说明的一点是Model并非后端想象的那种全局共享，而是页面级别的共享，如果你在浏览器中打开了两个http://localhost:8000/ok页面，你会发现counter无法跨页面共享，但在同一页面内，其counter的值是共享的。​默认情况下，Ant Design Pro（基于 Umi）会在每次打开新页面（路由）时重新初始化 Model 的状态。如果是通过单页应用（SPA）内的路由切换，页面组件不会完全卸载，Model 状态会保留。但如果是通过浏览器的刷新（F5）或者直接访问 URL，页面组件会完全卸载，Model 状态也会重置。关于model和typing.d中的类型定义，核心区别如下：

维度	src/models	services/typing.d.ts
内容类型	状态 + 逻辑	纯类型声明
技术实现	React Hooks	TypeScript 类型系统
数据流动	组件 ↔ Model ↔ Service	Service ↔ 后端接口
修改频率	高频（随业务逻辑变化）	低频（接口契约稳定后很少改动）
复用范围	当前页面或全局	全项目通用

权限管理

关于权限，上一篇文章中也曾简单的介绍过，在实际的项目应用中，通常有如下场景：

• 不同的用户对页面有不同的访问权限
• 不同的用户在页面中可以看到元素和操作不同

当然不同的用户看到的数据也会存在差异，但这个由后端控制，一般并不需要前端处理。Ant Design Pro的权限定义在src/access.ts中，示例代码如下：

/**
 * @see https://umijs.org/docs/max/access#access
 * */
export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
  const { currentUser } = initialState ?? {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
    accessOk:  currentUser && currentUser.name === 'guest',
    accessAuth: currentUser && currentUser.name === 'admin',
  };
}

示例中，我们定义了三个权限，canAdmin、accessOk和accessAuth，分别对应管理员、普通用户和需要权限认证的页面，如果是页面级别的访问控制，只需要在routes.ts中添加access配置：

 { path: '/ok', component: './OK',access:'accessOk' }

因为我们默认使用admin来登录的，所以在访问http://localhost:8000/ok时，会将Ant Desgin Pro的默认403页面返回给我们，告诉我们没有这个页面的访问权限，如果涉及到页面内元素的访问权限，则需要通过useAccess hook来获取权限：

import React from "react";
import { useAccess } from "umi";

const AuthPage=()=>{
  const access = useAccess();
  //判断是否有权限访问
  if(!access.accessAuth){
    return <div><p>无权限</p></div>
  }
  return <div><p>欢迎访问</p></div>
}

export default AuthPage;

全局初始数据

大部分的中台管理项目都会有全局初始数据的需求，比如用户信息或者一些全局依赖的基础数据，Ant Design Pro提供了一个极简的方式来初始化这部分数据，用于在页面初始化时获取全局初始数据，该方法在/src/app.tsx中：

/**
 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
 * */
export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.CurrentUser;
  loading?: boolean;
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    return {
      name: 'admin',
      avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
      userid: '000001',
      access: 'admin',
      email: 'admin@qq.com',
    } as API.CurrentUser;
  };
  // 如果不是登录页面，执行
  const { location } = history;
  if (location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: defaultSettings as Partial<LayoutSettings>,
    };
  }
  return {
    fetchUserInfo,
    settings: defaultSettings as Partial<LayoutSettings>,
  };
}

该方法返回的数据会被默认注入到一个nampespace为initialState的React Context中，在页面中可以直接通过useModel来获取到该数据，示例代码如下：

import React from "react";
import { useAccess, useModel } from "umi";

const AuthPage=()=>{
  const access = useAccess();
  const {initialState, loading, refresh, setInitialState}=useModel('@@initialState');
  if(!access.accessAuth){
    return <div><p>无权限</p></div>
  }
  return <div><p>欢迎访问,{initialState?.currentUser?.name}</p></div>
}

export default AuthPage;