当前位置：首页 > news >正文

项目实战--路由权限

news 来源：原创 2025/6/2 21:29:09

封装

单独抽象成组件，写一个新的关于路由的NewsRouter.jsx：

import SideMenu from "../../components/sandbox/SideMenu";
import TopHeader from "../../components/sandbox/TopHeader";
import { Routes, Route } from "react-router-dom";
import Home from "../../views/sandbox/home/Home";
import RightList from "../../views/sandbox/right-manage/RightList";
import UserList from "../../views/sandbox/user-manage/UserList";
import RoleList from "../../views/sandbox/right-manage/RoleList";
import { Navigate } from "react-router-dom";
import Nopermission from "../../views/sandbox/nopermission/Nopermission";
//引入antd
import { theme, Layout, ConfigProvider } from "antd";
import NewsAdd from "../../views/sandbox/news-manage/NewsAdd";
import NewsDraft from "../../views/sandbox/news-manage/NewsDraft";
import NewsCategory from "../../views/sandbox/news-manage/NewsCategory";
import Audit from "../../views/sandbox/audit-manage/Audit";
import AuditList from "../../views/sandbox/audit-manage/AuditList";
import Published from "../../views/sandbox/publish-manage/Published";
import Unpublished from "../../views/sandbox/publish-manage/Unpublished";
import Sunset from "../../views/sandbox/publish-manage/Sunset";
import { use, useEffect,useState } from "react";
import axios from "axios";


//创建一个本地的路由映射表
const LocalRouterMap = {
    "/home":Home,
    "user-manage/list":UserList,
    "right-manage/right/list":RightList,
    "right-manage/role/list":RoleList,
    //写什么新闻列表啊，各种权限啊
    "/news-manage/add":NewsAdd,
    "/news-manage/draft":NewsDraft,
    "/news-manage/category":NewsCategory,
    "/audit-manage/audit":Audit,
    "/audit-manage/list":AuditList,
    "publish-manage/published":Published,
    "/publish-manage/unpublished":Unpublished,
    "/publish-manage/sunset":Sunset,
} 

export default function NewsRouter() {
    const [BackRouteList,setBackRouteList] = useState([])
    useEffect(()=>{
        Promise.all([
            axios.get("http://localhost:3000/rights"),
            axios.get("http://localhost:3000/children"), 
        ]).then(res=>{
        //    console.log(res); 
           setBackRouteList([...res[0].data,...res[1].data])
        //    console.log([...res[0].data,res[1].data])
        })
    },[])
  return (
    <Routes>
        {/* 理应后端取数据，根据权限动态渲染 */}
      {
        BackRouteList.map(item=>
            <Route path={item.key}/>
        )
      }
      <Route path="/" element={<Navigate to="/home" />} />
      <Route path="*" element={<Nopermission />} />
    </Routes>
  )
}

权限判断

但是这样的路由权限都是嵌套的，应该怎么办呢？

没所谓，axios两次就好了

import SideMenu from '../../components/sandbox/SideMenu'
import TopHeader from '../../components/sandbox/TopHeader'
import { Routes, Route } from 'react-router-dom'
import Home from '../../views/sandbox/home/Home'
import RightList from '../../views/sandbox/right-manage/RightList'
import UserList from '../../views/sandbox/user-manage/UserList'
import RoleList from '../../views/sandbox/right-manage/RoleList'
import { Navigate } from 'react-router-dom'
import Nopermission from '../../views/sandbox/nopermission/Nopermission'
//引入antd
import { theme, Layout, ConfigProvider } from 'antd'
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft'
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory'
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Published from '../../views/sandbox/publish-manage/Published'
import Unpublished from '../../views/sandbox/publish-manage/Unpublished'
import Sunset from '../../views/sandbox/publish-manage/Sunset'
import { use, useEffect, useState } from 'react'
import axios from 'axios'

//创建一个本地的路由映射表
const LocalRouterMap = {
  '/home': Home,
  '/user-manage/list': UserList,
  '/right-manage/right/list': RightList,
  '/right-manage/role/list': RoleList,
  //写什么新闻列表啊，各种权限啊
  '/news-manage/add': NewsAdd,
  '/news-manage/draft': NewsDraft,
  '/news-manage/category': NewsCategory,
  '/audit-manage/audit': Audit,
  '/audit-manage/list': AuditList,
  'publish-manage/published': Published,
  '/publish-manage/unpublished': Unpublished,
  '/publish-manage/sunset': Sunset,
}

export default function NewsRouter() {
  // 后端返回的路由映射表
  const [BackRouteList, setBackRouteList] = useState([])
  useEffect(() => {
    Promise.all([
      axios.get('http://localhost:3000/rights'),
      axios.get('http://localhost:3000/children'),
    ]).then((res) => {
      setBackRouteList([...res[0].data, ...res[1].data])
    })
  }, [])

  const {
    role: { rights },
  } = JSON.parse(localStorage.getItem('token'))

  const checkRoute = (item) => {
    return LocalRouterMap[item.key] && item.pagepermisson
  }
  const checkUserPermisson = (item) => {
    //当前登录用户权限列表
    return rights.includes(item.key)
  }

  return (
    <Routes>
      {/* 动态渲染路由 */}
      {BackRouteList.map((item) => {
        const Component = LocalRouterMap[item.key]
        // console.log(item.key)

        if (checkRoute(item) && checkUserPermisson(item)) {
          return (
            Component && (
              <Route path={item.key} key={item.key} element={<Component />} />
            )
          )
        }
        return null
      })}

      {/* 首页重定向 */}
      <Route path="/" element={<Navigate to="/home" />} />

      {/* 权限不足页面 */}
      {BackRouteList.length > 0 && (
        <Route path="*" element={<Nopermission />} />
      )}
    </Routes>
  )
}

同时加上权限的判断，这样可以阻拦通过路由访问页面的行为（拦截）

进度条

给代码加上进度条

npm install nprogress

然后继续引入：

import SideMenu from "../../components/sandbox/SideMenu";
import TopHeader from "../../components/sandbox/TopHeader";
import { Routes, Route } from "react-router-dom";
import Home from "./home/Home";
import RightList from "./right-manage/RightList";
import UserList from "./user-manage/UserList";
import RoleList from "./right-manage/RoleList";
import { Navigate } from "react-router-dom";
import Nopermission from "../sandbox/nopermission/Nopermission";
//引入antd
import { theme, Layout, ConfigProvider } from "antd";
import NewsRouter from "../../components/sandbox/NewsRouter";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { useLocation } from 'react-router-dom'

//引入自己写的css
import "./NewSandbox.css";
import { useEffect } from "react";
//解构Layout
const { Content } = Layout;

function NewSandbox() {
    const location = useLocation();
    useEffect(() => {
        // 当路由变化时，启动进度条
        NProgress.start();
        // 模拟延迟，延迟一定时间后完成进度条
        const timer = setTimeout(() => {
            NProgress.done();
        }, 500); // 可以根据内容加载的时间调整延迟，500ms 是一个示例

        // 清理定时器
        return () => {
            clearTimeout(timer);
            NProgress.done();
        };
    }, [location]); // 每次路由变化时触发该 effect

//解构theme
    const { token } = theme.useToken(); // 获取主题 token
    const { colorBgContainer, borderRadiusLG } = token;

    return (
       <ConfigProvider> <Layout>
            {/* 侧边栏 */}
            <SideMenu></SideMenu>
            <Layout>
                {/* 顶部栏 */}
                <TopHeader></TopHeader>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        // 溢出隐藏
                        overflow:'auto',
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
            >
                <NewsRouter></NewsRouter>
            </Content>
        </Layout>
        </Layout></ConfigProvider>
    
    );
}

export default NewSandbox;

这样可以监听每一次路由变化的时候，都加载一下进度条