完成权限管理

src/App.js

@@ -1,13 +1,14 @@
 import './App.css';
-import React, {Component} from 'react';
+import React, {useContext} from 'react';
 import {
     HomeOutlined,
     TeamOutlined,
     DashboardOutlined,
     FileProtectOutlined,
     CustomerServiceTwoTone,
+    UserOutlined
 } from '@ant-design/icons';
-import {Layout, Menu, Image} from 'antd';
+import {Layout, Menu, Image, Spin} from 'antd';
 import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
 import Home from "./views/Home"
 import Dashboard from "./views/Dashboard"
@@ -18,13 +19,15 @@ import Customer_care_inchina from "./charts/Customer_care_inchina"
 import Customer_care_potential from "./charts/Customer_care_potential"
 import Customer_care_regular from "./charts/Customer_care_regular"
 import Logo from './logo.png'
+import {stores_Context} from "./config";
+import {observer} from "mobx-react";
 
 
-class App extends Component {
+const App = () => {
 
 
-    render() {
     const {Content, Footer, Sider} = Layout;
+    const {auth_store} = useContext(stores_Context);
 
     const menu_items = [
         {key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
@@ -45,7 +48,6 @@ class App extends Component {
             children: [
                 {key: 412, label: <NavLink to="/order">损益表</NavLink>},
                 {key: 41, label: <NavLink to="/order">信用卡账单</NavLink>},
-                    {key: 42, label: <NavLink to="/auth">测试登陆</NavLink>},
             ]
         },
 
@@ -71,14 +73,14 @@ class App extends Component {
                         minHeight: 480,
                     }}>
                         <Routes>
-                                <Route element={<ProtectedRoute auth={['admin', 'director_bu']}/>}>
                             <Route path="/" element={<Home/>}/>
+                            <Route element={<ProtectedRoute auth={['admin', 'director_bu']}/>}>
                                 <Route path="/orders" element={<Orders/>}/>
                                 <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title"
                                        element={<Orders_sub/>}/>
                                 <Route path="/dashboard" element={<Dashboard/>}/>
                             </Route>
-                                <Route element={<ProtectedRoute auth={['admin', 'customer_care']}/>}>
+                            <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'customer_care']}/>}>
                                 <Route path="/customer_care_inchina" element={<Customer_care_inchina/>}/>
                                 <Route path="/customer_care_regular" element={<Customer_care_regular/>}/>
                                 <Route path="/customer_care_potential" element={<Customer_care_potential/>}/>
@@ -90,13 +92,14 @@ class App extends Component {
                             textAlign: 'center',
                         }}
                     >
+                        <UserOutlined/> {auth_store.user.name} ({auth_store.user.userid})<br/>
                         Hainatravel Dashboard ©2022 Created by IT
                     </Footer>
                 </Layout>
             </Layout>
         </BrowserRouter>
     );
-    }
+
 }
 
-export default App;
+export default observer(App);

src/config.js

@@ -2,5 +2,5 @@ import React from "react";
 
 export const stores_Context = React.createContext();
 export const DATE_FORMAT = 'YYYY-MM-DD';
-export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn';
+//export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn';
-//export const HT_HOST = 'http://202.103.68.100:890';//889正式库
+export const HT_HOST = 'http://202.103.68.100:890';//889正式库

src/index.js

@@ -5,6 +5,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {stores_Context} from './config'
 import rootStore from "./stores/Index"
+import {Spin} from "antd";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 

src/stores/AuthStore.js

@@ -1,7 +1,6 @@
 import {makeAutoObservable, runInAction} from "mobx";
 import * as dd from 'dingtalk-jsapi';
 import * as config from "../config";
-import {Outlet, Navigate} from 'react-router-dom';
 
 
 //权限管理
@@ -10,10 +9,11 @@ class AuthStore {
     constructor(rootStore) {
         this.rootStore = rootStore;
         makeAutoObservable(this);
-        this.get_auth_info();
+        this.get_auth();
     }
 
     auth = [];
+    user = {};
 
     has_permission(requireds) {
         if (Object.keys(requireds).length == 0) {
@@ -26,25 +26,24 @@ class AuthStore {
         return false;
     }
 
-    get_auth_info() {
+    //请求权限
-        if (this.auth == false) { //如果没有权限，则去请求获取
+    get_auth() {
-            this.auth = ['customer_care'];
+        let _this = this;
-        }
-        return;
         const CORPID = 'ding48bce8fd3957c96b';//企业的id
         dd.runtime.permission.requestAuthCode({
             corpId: CORPID,
             onSuccess: function (res) {
+                console.log(res);
                 let code = res.code;
-                runInAction(() => {
+                let url = '/dingtalk/dingtalkwork/Getusers_auth?code=' + code;
-                    this.auth = ['admin'];
-                })
-                let url = '?code=' + code;
                 //请求获取HT接口获取用户权限和用户信息
                 fetch(config.HT_HOST + url)
                     .then((response) => response.json())
                     .then((json) => {
-                        console.log(json);
+                        runInAction(() => {
+                            _this.user = json.result;
+                            _this.auth = json.result.authlist;
+                        })
                     })
                     .catch((error) => {
                         console.log('fetch data failed', error);

src/views/Home.js

@@ -3,6 +3,13 @@ import {observer} from 'mobx-react';
 import {Row, Col, Button, Tabs, Table} from 'antd';
 import {stores_Context} from '../config'
 import {useNavigate} from "react-router-dom";
+import {
+    SlackOutlined,
+    SketchOutlined,
+    AntCloudOutlined,
+    RedditOutlined,
+    GithubOutlined
+} from '@ant-design/icons';
 
 const Home = () => {
 
@@ -11,8 +18,11 @@ const Home = () => {
 
     return (
         <div>
+            <SketchOutlined/> <AntCloudOutlined/> <SlackOutlined/> <RedditOutlined/> <GithubOutlined/>
+            <br/>
             这就是一个主页,什么也没写
-            <Button onClick={() => navigate('/auth')}>跳转</Button>
+            <br/>
+            <SketchOutlined/> <AntCloudOutlined/> <SlackOutlined/> <RedditOutlined/> <GithubOutlined/>
         </div>
     );
 

src/views/ProtectedRoute.js

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from 'react';
-import {Row, Col, Button, Tabs, Table, Result, Space} from 'antd';
+import {Row, Col, Button, Tabs, Spin, Result, Space} from 'antd';
 import {
     ContainerOutlined,
     SearchOutlined,
@@ -15,6 +15,7 @@ import {Outlet, useOutlet, useLocation, useNavigate} from 'react-router-dom';
 
 const ProtectedRoute = ({auth}) => {
     const {auth_store} = useContext(stores_Context);
+
     if (auth_store.has_permission(auth)) {
         return <Outlet/>
     }
@@ -24,8 +25,8 @@ const ProtectedRoute = ({auth}) => {
             <Result
                 status="403"
                 title="403 权限不足"
-                subTitle={"试着联系一下技术 " + auth_store.code}
+                subTitle={"试着联系一下技术，所需权限: "+auth.toString()}
-                extra={<Button type="primary" onClick={() => auth_store.get_auth_info()}>测试免登 </Button>}
+                extra=''
             />
         </div>
     );