首页 > 其他分享 >腿夹腿,带你用react撸后台,系列三(布局和鉴权篇)

腿夹腿,带你用react撸后台,系列三(布局和鉴权篇)

时间:2024-11-06 15:48:08浏览次数:6  
标签:const react 组件 后台 权限 鉴权 路由

Github地址 | 文档 | 在线预览 | 主题版在线预览

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

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

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

1. 概述

上篇我们提到使用一个配置 routesConfig,可以生成 reactRoutesroutes,利用 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 中,用 withAuthConsoleLayout 布局组件包裹

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

相关文章

  • 新建一个react+vite+tailwindui项目
    创建Vite项目使用Vite创建一个新的React项目:npmcreatevite@latestmy-react-app--templatereactmy-react-app是你的项目名称,你可以根据需要更改。进入项目目录进入你刚刚创建的项目目录:cdmy-react-app安装TailwindCSS在项目中安装TailwindCSS及其依......
  • 基于Java+SpringBoot+Vue+HTML5图书商城管理系统(源码+LW+调试文档+讲解等)/图书商城/
    博主介绍......
  • springboot+vue充电桩后台管理系统小程序8【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着电动汽车产业的蓬勃发展,充电桩作为电动汽车能源补给的关键基础设施,其数量与分布正迅速扩展。然而,充电桩的高效运营与管理成为了一个亟待解决的问题。传统的人工管理方式不仅效率低下,还难以实时监控充电桩状态、用户充电行为及电站......
  • 御剑后台扫描工具-配置文件的格式解释
    当然,以下是这些缩写的中文含义:ASP:ASP代表活动服务器页面(ActiveServerPages)。它是由微软开发的服务器端脚本引擎,允许开发者创建动态、交互式的网页服务器应用程序。Gov:这并不是网页开发术语,但当在网址中看到时,"gov"是美国政府实体使用的顶级域名(Top-LevelDomain)。例如......
  • 网站上传修改数据库,通过FTP和后台管理修改数据库的步骤
    一、通过FTP上传数据库文件备份现有数据库在进行任何操作之前,首先备份现有的数据库。可以通过phpMyAdmin或其他数据库管理工具导出数据库文件。准备新的数据库文件准备好新的数据库文件(通常为SQL文件),确保文件内容正确无误。连接到FTP服务器使用FTP客户端连接到你......
  • 【鉴权】OAuth 2.0: 高度灵活与安全的身份认证框架
    目录引言一、OAuth2.0的核心概念1.1资源拥有者(ResourceOwner)1.2客户端(Client)1.3授权服务器(AuthorizationServer)1.4资源服务器(ResourceServer)1.5OAuth2.0体系架构图二、OAuth2.0授权流程2.1OAuth2.0授权流程概述2.2常见的授权模式2.2.1授权码模式(Autho......
  • 【鉴权】深入理解 OAuth 2.0 授权流程
    目录引言OAuth2.0授权流程概览1.用户访问客户端应用2.客户端请求授权码3.授权服务器展示授权页面4.用户同意授权5.客户端使用授权码换取访问令牌6.授权服务器返回访问令牌7.客户端使用令牌访问资源8.资源服务器返回受保护资源9.客户端展示数据10.访问令牌过......
  • React
    渲染原理React其实是一个从上而下的组件树React的jsx通过createElement会重新变成js对象,因为js的资源比DOM来的要便宜得多,当组件树都创建完成之后,会进行一个diff算法,对节点进行一个懒更新,其实他循环的时候需要的那个key属性其实就是用来更准确地找到需要更新的地方,更节省资源......
  • EasyQBlog .NET 8 + Q-Blog 2.0博客模板 + easyweb iframe后台模板 开发的个人博客
    EasyAdmin介绍.NET8+Q-Blog2.0博客模板+easywebiframe后台模板开发的个人博客演示地址:https://www.baocaige.top暂不开源,需要滴滴!!!项目截图 ......
  • PbootCMS网站后台管理系统登录界面描述/LOGO/背景图/介绍修改
    1.修改登录界面描述位置:登录页面通常会有一个简短的系统或公司介绍。修改方法:找到登录页面的模板文件,通常位于 /template/admin/login.html。在该文件中找到描述文本的部分,通常是 <p> 标签内的内容。直接修改该段落的内容即可。2.修改LOGO位置:LOGO通常显......