react组件权限控制+路由权限+路由懒加载

组件控制

permission.js

import React, { useEffect, useState, useContext } from "react"

const PermissionContext = React.createContext({
    permission: []
});

const getPermission = (permissionList) => {
    console.log('请求数据')
    return new Promise((resolve, reject) => {
       setTimeout(() => {
            resolve(['add', 'remove'])
       }, 1000)
    })
}

export const Permission = (props) => {
    const [yunxu, setYunxu] = useState([]);

    useEffect(async () => {
        let list = await getPermission(props.permissionList);
        setYunxu(list);
    }, [])

    return (
        <PermissionContext.Provider value={{permission: yunxu}}>
            {props.children}
        </PermissionContext.Provider>
    )
}

export const IsAllow = (props) => {
    const {permission} = useContext(PermissionContext);
    if (permission.indexOf(props.code) === -1) {
        return <div>无权限</div>;
    }
    return (props.children)
}

使用

import React, { Component, Suspense } from 'react';
import {Permission, IsAllow} from './permission/Permission'
export default class Card extends React.Component {
  state = {
    vis: false,
    list: ['add', 'remove']
  }

  onClick = () => {
    this.setState({
        vis: true
    })
  }
  render() {
      return (
          <Permission permissionList={['add', 'remove']}>
            <div>
                <IsAllow code="add">
                  <button onClick={this.onClick}>add</button>
                </IsAllow>
                <IsAllow code="add1">
                  <button onClick={this.onClick}>add1</button>
                </IsAllow>
            </div>
          </Permission>
      )
  }
}

路由权限+懒加载

index.js

import React, { Component, Suspense } from 'react';
import ReactDOM from 'react-dom';
import { find } from 'lodash';
import './index.css';
import App from './App';

import {BrowserRouter, Route, Routes, Link, Outlet} from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

const Card = React.lazy(() => import("./src/Card"))
const Messgae = React.lazy(() => import("./src/Messgae"))
const Dog = React.lazy(() => import("./src/Dog"))
const New = React.lazy(() => import("./src/New"))
const Donghua = React.lazy(() => import("./src/Donghua"))
// 前端
const allRoutes = [
  {
    route: 'Card',
    component: Card
  },
  {
    route: 'Message',
    component: Messgae
  },
  {
    route: 'Dog',
    component: Dog
  },
  {
    route: 'New',
    component: New
  },
  {
    route: 'Donghua',
    component: Donghua
  }
];

// 模拟用户能获取到的路由展示
const getRoutes = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(['Dog', 'New', 'Message'])
    }, 1000)
  })
}

function lazy (Component)  {
  return <Suspense fallback={<div>loading....</div>}><Component /></Suspense>
}

getRoutes().then((list) => {
  // 从后端获取到能够展示的路由 list
  // 这里需要动态生成路由和组件的关系，否则即使路由link不存在，但是直接输入url还是能访问到对应的页面
  ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App list={list}/>}>
            {
              list.map((code) => {
                let currentRoute = find(allRoutes, { route: code });
                console.log('currentRoute', currentRoute)
                return <Route path={currentRoute.route} element={lazy(currentRoute.component)} key={currentRoute.route} />;
              })
            }
          </Route>
        </Routes>
      </BrowserRouter>,
    </React.StrictMode>,
    document.getElementById('root')
  );
});



// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

app.js

import logo from './logo.svg';
import React, { Component, Suspense } from 'react';
import './App.css';
import {Link, Outlet} from 'react-router-dom';

const Header = React.lazy(() => import("./src/Header"))

function App(props) {
  return (
    <div className="App">
      {
        props.list.map((code) => {
          return <Link to={'/'+code} key={code} >{code}</Link>
        })
      }
      <Outlet />
      <br />
    </div>
  );
}

export default App;