腿夹腿，带你用 react 撸后台，系列三（布局和鉴权篇）（最近有一大波更新）

react-antd-console 是一个后台管理系统的前端解决方案，封装了后台管理系统必要功能（如登录、鉴权、菜单、面包屑、标签页等），帮助开发人员专注于业务快速开发。项目基于 React 18、Ant design 5、Vite 和 TypeScript 等新版本。对于使用到的各项技术，会被持续更新至最新版本。可放心用于生产环境

为了方便大家更好的掌握和使用本项目，推出系列文章:

腿夹腿，带你用 react 撸后台，系列一（ Vite 篇）
腿夹腿，带你用 react 撸后台，系列二（项目骨架篇）
腿夹腿，带你用 react 撸后台，系列三（布局和鉴权篇）

如果你喜欢这个项目或认为对你有用，欢迎使用体验和 Star

1. 概述

上篇我们提到使用一个配置 routesConfig，可以生成 reactRoutes 和 routes，利用 reactRoutes 可生成路由，利用 routes 可生成菜单/面包屑等数据。本篇再来看看，路由、布局、菜单、权限、鉴权等相互是怎么发生化学反应的

2. 布局组件 `ConsoleLayout`

在 react-router 中，利用 nested-routes 特性，父组件可作为布局组件。如果在布局组件中使用 <Outlet />，那么当页面 url 匹配到路由配置的 path时，就会渲染对应的路由配置的 component 组件，而布局组件中的其他元素会一直保持不变，并且不会重新渲染

// src/router/config/index.tsx

{
  path: '/',
  component: () => import('@/layouts/ConsoleLayout'), // 使用 import() 作代码分割
  flatten: true, // flatten 可以将子路由的菜单层级提升到本级，在渲染菜单时有用
  children: [
    {
      path: 'index',
      component: () => import('@/pages/home'),
      name: '首页',
      permission: 'homeIndex',
      icon: <SvgIcon name="home" />,
    }
  ],
}

// src/layouts/ConsoleLayout/index.tsx

import { Outlet } from 'react-router-dom';

const ConsoleLayout = () => {
  return (
    <div className="console-layout">
      <div className="console-layout__left-side">
        <SideMenu />
      </div>
      <div className="console-layout__right-side">
        <Header />
        <div className="console-layout__right-side-main">
          <Outlet />
        </div>
        <Footer />
      </div>
    </div>
  );
};

再稍微写点样式，就可以写好整体的布局结构了

3. 保持登录状态和获取权限数据

话分两头。在登录时， token 被保存在了 localstorage，这样刷新页面后，程序仍然可以读取到保存的 token，因此保持了登录状态。另一方面，只要进入页面就会调用一次用户基本信息接口，其返回了代表用户路由访问权限的数据 permissions。再把后端的数据映射为前端的数据，保存在全局数据中。为方便查询，使用 Set 数据结构

// src/models/withAuth/permissions.ts

function formatPermissions(permissions: string[]) {
  const set = new Set(permissions);
  return {
    homeIndex: set.has('home:index'), // 每一个权限和每一个路由配置，一一对应
  };
}

export default formatPermissions;

4. 菜单组件 `<SideMenu />`

antd 有菜单组件 Menu: Menu 组件可以根据 items 等 api 生成菜单。可以利用权限数据 permissions 和路由配置 routesConfig，生成 items。没有权限的路由，将不包含在 items 中

5. 鉴权

前面我们搭建好了基本的布局结构，但这还不够。还需要在每次切换路由（需要鉴权的路由）的时候，检查登录状态和是否有当前路由访问权限。具体表现为:

每次路由切换，都会检查是否有本地 token ？
- 若无本地 token ，则跳转登录页；
- 若有本地 token ，则检查是否已请求基础数据？
  - 若未请求基础数据，则请求之；
  - 若已请求基础数据，则根据基础数据检查是否具备当前路由的访问权限？
    - 若无权限，则去 403 页。
    - 若有权限，则渲染路由 <Outlet />。

withAuthModel.init = () => {
  // 检查 token
  const { accessToken } = lsGetToken({ bellwether: true }) ?? {};
  if (!accessToken) {
    this.setState({
      hasToken: false,
      loading: false,
    });
    history.push(`/login`);
    return;
  }
  this.setState({ hasToken: true });

  // 检查基础数据
  try {
    if (!this.state.hasRequestedBaseInfo) {
      await this.requestBaseInfo();
    }
  } catch (err) {
    console.log(err);
  }
  this.setState({ loading: false });
  
  // 检查当前路由的访问权限
  const routePath = router.getRoutePath(window.location.pathname);
  const route = router.flattenRoutes.get(routePath);
  if (route?.permission && !this.state.permissions[route.permission]) {
    history.push('/no-access'); 
  }
}

上述逻辑如果在 vue 中，可以利用 vue-router 的导航守卫功能封装。在 react 可以通过 useEffect 监听 location.pathname 封装。再把这些逻辑放到一个高阶组件 withAuth 中，用 withAuth 把 ConsoleLayout 布局组件包裹

const withAuth = (Component) => {
  const Auth = (props) => {
    const loading = useModel(withAuthModel, 'loading');
    const location = useLocation();

    useEffect(() => {
      (async function() {
        await withAuthModel.init();
      })();
    }, [location.pathname]);

    if (loading) {
      return <Loading />;
    }

    return (
      <Component {...props} />
    ); 
  };

  return Auth;
};

const WithAuthConsoleLayout = withAuth(() => {
  return <ConsoleLayout />;
});

也可以编写自定义的布局组件，然后用 withAuth 高阶组件包裹，以达到鉴权效果

通过以上一顿操作，我们不仅实现了功能，还将配置数据、布局/菜单样式和鉴权等逻辑解耦。

6. 系列文章

腿夹腿，带你用 react 撸后台，系列一（ Vite 篇）
腿夹腿，带你用 react 撸后台，系列二（项目骨架篇）
腿夹腿，带你用 react 撸后台，系列三（布局和鉴权篇）