Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成权限管理

Browse Source
feature/2.0-sales-trade
尹诚诚 3 years ago
parent c88f0118d9
commit 6ebe383f84
6 changed files with 106 additions and 92 deletions
Show Stats Download Patch File Download Diff File

149
src/App.js
Unescape Escape View File

@ -1,13 +1,14 @@
import './App.css'; import './App.css';
import React, {Component} from 'react'; import React, {useContext} from 'react';
import { import {
HomeOutlined, HomeOutlined,
TeamOutlined, TeamOutlined,
DashboardOutlined, DashboardOutlined,
FileProtectOutlined, FileProtectOutlined,
CustomerServiceTwoTone, CustomerServiceTwoTone,
UserOutlined
} from '@ant-design/icons'; } 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 {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
import Home from "./views/Home" import Home from "./views/Home"
import Dashboard from "./views/Dashboard" 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_potential from "./charts/Customer_care_potential"
import Customer_care_regular from "./charts/Customer_care_regular" import Customer_care_regular from "./charts/Customer_care_regular"
import Logo from './logo.png' 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 = [ const menu_items = [
{key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>}, {key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
{key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,}, {key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>,},
{key: 5, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>}, {key: 5, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
{ {
key: 3, label: '客运', icon: <CustomerServiceTwoTone/>, key: 3, label: '客运', icon: <CustomerServiceTwoTone/>,
children: [ children: [
{key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink>}, {key: 31, label: <NavLink to="/customer_care_potential">潜力客户</NavLink>},
{key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink>}, {key: 32, label: <NavLink to="/customer_care_regular">老客户</NavLink>},
{key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink>}, {key: 33, label: <NavLink to="/customer_care_inchina">在华客户</NavLink>},
] ]
}, },
{ {
key: 4, key: 4,
label: '财务', label: '财务',
icon: <TeamOutlined/>, icon: <TeamOutlined/>,
children: [ children: [
{key: 412, label: <NavLink to="/order">损益表</NavLink>}, {key: 412, label: <NavLink to="/order">损益表</NavLink>},
{key: 41, label: <NavLink to="/order">信用卡账单</NavLink>}, {key: 41, label: <NavLink to="/order">信用卡账单</NavLink>},
{key: 42, label: <NavLink to="/auth">测试登陆</NavLink>}, ]
] },
},
]; ];
return ( return (
<BrowserRouter> <BrowserRouter>
<Layout <Layout
style={{ style={{
minHeight: '100vh', minHeight: '100vh',
}} }}
> >
<Sider collapsible={false} defaultCollapsed={false} breakpoint="lg" <Sider collapsible={false} defaultCollapsed={false} breakpoint="lg"
collapsedWidth="0"> collapsedWidth="0">
<Image src={Logo} preview={false}/> <Image src={Logo} preview={false}/>
<Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['3']} mode="inline" <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['3']} mode="inline"
items={menu_items}/> items={menu_items}/>
</Sider> </Sider>
<Layout className="site-layout"> <Layout className="site-layout">
<Content style={{ <Content style={{
padding: 16, padding: 16,
minHeight: 480, minHeight: 480,
}}> }}>
<Routes> <Routes>
<Route element={<ProtectedRoute auth={['admin', 'director_bu']}/>}> <Route path="/" element={<Home/>}/>
<Route path="/" element={<Home/>}/> <Route element={<ProtectedRoute auth={['admin', 'director_bu']}/>}>
<Route path="/orders" element={<Orders/>}/> <Route path="/orders" element={<Orders/>}/>
<Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title"
element={<Orders_sub/>}/> element={<Orders_sub/>}/>
<Route path="/dashboard" element={<Dashboard/>}/> <Route path="/dashboard" element={<Dashboard/>}/>
</Route> </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_inchina" element={<Customer_care_inchina/>}/>
<Route path="/customer_care_regular" element={<Customer_care_regular/>}/> <Route path="/customer_care_regular" element={<Customer_care_regular/>}/>
<Route path="/customer_care_potential" element={<Customer_care_potential/>}/> <Route path="/customer_care_potential" element={<Customer_care_potential/>}/>
</Route> </Route>
</Routes> </Routes>
</Content> </Content>
<Footer <Footer
style={{ style={{
textAlign: 'center', textAlign: 'center',
}} }}
> >
Hainatravel Dashboard ©2022 Created by IT <UserOutlined/> {auth_store.user.name} ({auth_store.user.userid})<br/>
</Footer> Hainatravel Dashboard ©2022 Created by IT
</Layout> </Footer>
</Layout> </Layout>
</BrowserRouter> </Layout>
); </BrowserRouter>
} );
} }
export default App; export default observer(App);

4
src/config.js
Unescape Escape View File

@ -2,5 +2,5 @@ import React from "react";
export const stores_Context = React.createContext(); export const stores_Context = React.createContext();
export const DATE_FORMAT = 'YYYY-MM-DD'; 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正式库

1
src/index.js
Unescape Escape View File

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

23
src/stores/AuthStore.js
Unescape Escape View File

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

12
src/views/Home.js
Unescape Escape View File

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

9
src/views/ProtectedRoute.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save