完成权限管理

3 years ago · 6ebe383f84
parent c88f0118d9
commit 6ebe383f84
6 changed files with 106 additions and 92 deletions
--- a/src/App.js
+++ b/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,85 +19,87 @@ 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 {Content, Footer, Sider} = Layout;
+    const {auth_store} = useContext(stores_Context);

-        const menu_items = [
-            {key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
-            {key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
-            {key: 5, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
-            {
-                key: 3, label: '客运', icon: <CustomerServiceTwoTone/>,
-                children: [
-                    {key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink>},
-                    {key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink>},
-                    {key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink>},
-                ]
-            },
-            {
-                key: 4,
-                label: '财务',
-                icon: <TeamOutlined/>,
-                children: [
-                    {key: 412, label: <NavLink to="/order">损益表</NavLink>},
-                    {key: 41, label: <NavLink to="/order">信用卡账单</NavLink>},
-                    {key: 42, label: <NavLink to="/auth">测试登陆</NavLink>},
-                ]
-            },
+    const menu_items = [
+        {key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
+        {key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
+        {key: 5, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
+        {
+            key: 3, label: '客运', icon: <CustomerServiceTwoTone/>,
+            children: [
+                {key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink>},
+                {key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink>},
+                {key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink>},
+            ]
+        },
+        {
+            key: 4,
+            label: '财务',
+            icon: <TeamOutlined/>,
+            children: [
+                {key: 412, label: <NavLink to="/order">损益表</NavLink>},
+                {key: 41, label: <NavLink to="/order">信用卡账单</NavLink>},
+            ]
+        },


-        ];
+    ];

-        return (
-            <BrowserRouter>
-                <Layout
-                    style={{
-                        minHeight: '100vh',
-                    }}
-                >
-                    <Sider collapsible={false} defaultCollapsed={false} breakpoint="lg"
-                           collapsedWidth="0">
-                        <Image src={Logo} preview={false}/>
-                        <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['3']} mode="inline"
-                              items={menu_items}/>
-                    </Sider>
-                    <Layout className="site-layout">
-                        <Content style={{
-                            padding: 16,
-                            minHeight: 480,
-                        }}>
-                            <Routes>
-                                <Route element={<ProtectedRoute auth={['admin', 'director_bu']}/>}>
-                                    <Route path="/" element={<Home/>}/>
-                                    <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 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/>}/>
-                                </Route>
-                            </Routes>
-                        </Content>
-                        <Footer
-                            style={{
-                                textAlign: 'center',
-                            }}
-                        >
-                            Hainatravel Dashboard ©2022 Created by IT
-                        </Footer>
-                    </Layout>
+    return (
+        <BrowserRouter>
+            <Layout
+                style={{
+                    minHeight: '100vh',
+                }}
+            >
+                <Sider collapsible={false} defaultCollapsed={false} breakpoint="lg"
+                       collapsedWidth="0">
+                    <Image src={Logo} preview={false}/>
+                    <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['3']} mode="inline"
+                          items={menu_items}/>
+                </Sider>
+                <Layout className="site-layout">
+                    <Content style={{
+                        padding: 16,
+                        minHeight: 480,
+                    }}>
+                        <Routes>
+                            <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', '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/>}/>
+                            </Route>
+                        </Routes>
+                    </Content>
+                    <Footer
+                        style={{
+                            textAlign: 'center',
+                        }}
+                    >
+                        <UserOutlined/> {auth_store.user.name} ({auth_store.user.userid})<br/>
+                        Hainatravel Dashboard ©2022 Created by IT
+                    </Footer>
                </Layout>
-            </BrowserRouter>
-        );
-    }
+            </Layout>
+        </BrowserRouter>
+    );
+
 }

-export default App;
+export default observer(App);
--- a/src/config.js
+++ b/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 = 'http://202.103.68.100:890';//889正式库
+//export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn';
+export const HT_HOST = 'http://202.103.68.100:890';//889正式库
--- a/src/index.js
+++ b/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'));

--- a/src/stores/AuthStore.js
+++ b/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) { //如果没有权限，则去请求获取
-            this.auth = ['customer_care'];
-        }
-        return;
+    //请求权限
+    get_auth() {
+        let _this = this;
        const CORPID = 'ding48bce8fd3957c96b';//企业的id
        dd.runtime.permission.requestAuthCode({
            corpId: CORPID,
            onSuccess: function (res) {
+                console.log(res);
                let code = res.code;
-                runInAction(() => {
-                    this.auth = ['admin'];
-                })
-                let url = '?code=' + code;
+                let url = '/dingtalk/dingtalkwork/Getusers_auth?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);
--- a/src/views/Home.js
+++ b/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>
    );

--- a/src/views/ProtectedRoute.js
+++ b/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,8 +15,9 @@ 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/>
+        return <Outlet/>
    }

    return (
@ -24,8 +25,8 @@ const ProtectedRoute = ({auth}) => {
            <Result
                status="403"
                title="403 权限不足"
-                subTitle={"试着联系一下技术 " + auth_store.code}
-                extra={<Button type="primary" onClick={() => auth_store.get_auth_info()}>测试免登 </Button>}
+                subTitle={"试着联系一下技术，所需权限: "+auth.toString()}
+                extra=''
            />
        </div>
    );