Github地址 | 文档 | 在线预览 | 主题版在线预览
react-antd-console 是一个后台管理系统的前端解决方案,封装了后台管理系统必要功能(如登录、鉴权、菜单、面包屑、标签页等),帮助开发人员专注于业务快速开发。项目基于 React 18
、Ant design 5
、Vite
和 TypeScript
等新版本。对于使用到的各项技术,会被持续更新至最新版本。可放心用于生产环境
为了方便大家更好的掌握和使用本项目,推出系列文章:
如果你喜欢这个项目或认为对你有用,欢迎使用体验和 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 />
。
上述逻辑如果在 vue
中,可以利用 vue-router
的导航守卫功能实现。在 react
可以通过 useEffect
监听 location.pathname
实现
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');
}
}
再把这些逻辑放到一个高阶组件 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. 系列文章
如果你喜欢这个项目或认为对你有用,欢迎使用体验和 Star
Github地址 | 文档 | 在线预览 | 主题版在线预览
标签:const,react,组件,后台,权限,鉴权,路由 From: https://blog.csdn.net/2401_88086015/article/details/143564222