U web update

spug_web/src/components/AuthButton.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from 'antd';
+import { hasPermission } from "../libs";
+
+
+export default function AuthButton(props) {
+  let disabled = props.disabled;
+  if (props.auth && !hasPermission(props.auth)) {
+    disabled = true;
+  }
+  return <Button {...props} disabled={disabled}>{props.children}</Button>
+}

spug_web/src/components/AuthDiv.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { hasPermission } from "../libs";
+
+
+export default function AuthDiv(props) {
+  const disabled = props.auth && !hasPermission(props.auth);
+  return disabled ? null : <div {...props}>{props.children}</div>
+}

spug_web/src/components/index.js

@@ -1,11 +1,15 @@
 import StatisticsCard from './StatisticsCard';
 import SearchForm from './SearchForm';
 import LinkButton from './LinkButton';
+import AuthButton from './AuthButton';
+import AuthDiv from './AuthDiv';
 import ACEditor from './ACEditor';
 
 export {
   StatisticsCard,
   SearchForm,
   LinkButton,
+  AuthButton,
+  AuthDiv,
   ACEditor,
 }

spug_web/src/layout/index.js

@@ -4,17 +4,25 @@ import Sider from './Sider';
 import Header from './Header';
 import Footer from './Footer'
 import { Router } from '../libs/router';
+import { updatePermissions} from '../libs';
 import styles from './layout.module.css';
 
 
 export default class extends React.Component {
   constructor(props) {
     super(props);
+    this.initPermissions();
     this.state = {
       collapsed: false
     }
   }
 
+  initPermissions() {
+    const data = localStorage.getItem('permissions');
+    const isSuper = localStorage.getItem('is_supper') === 'true';
+    data && updatePermissions(isSuper, JSON.parse(data))
+  }
+
   render() {
     return (
       <Layout style={{minHeight: '100vh'}}>

spug_web/src/libs/functools.js

@@ -1,9 +1,18 @@
+let Permission = {
+  isSuper: false,
+  permissions: []
+};
+
+export function updatePermissions(isSupper, data) {
+  Permission.isSuper = isSupper;
+  Permission.permissions = data;
+}
+
 // 前端页面的权限判断(仅作为前端功能展示的控制，具体权限控制应在后端实现)
 export function hasPermission(strCode) {
-  if (localStorage.getItem('is_supper') === 'true') return true;
-  let permStr = localStorage.getItem('permissions');
-  if (!strCode || !permStr) return false;
-  const permissions = permStr.split(',');
+  const {isSuper, permissions} = Permission;
+  // console.log(isSuper, strCode, permissions);
+  if (!strCode || isSuper) return true;
   for (let or_item of strCode.split('|')) {
     if (isSubArray(permissions, or_item.split('&'))) {
       return true

spug_web/src/menus.js

@@ -1,6 +1,6 @@
 export default [
   {icon: 'desktop', title: '工作台', path: '/home'},
-  {icon: 'cloud-server', title: '主机管理', path: '/host'},
+  {icon: 'cloud-server', title: '主机管理', auth: 'host.host.view', path: '/host'},
   {
     icon: 'code', title: '批量执行', child: [
       {title: '执行任务', path: '/exec/task'},

spug_web/src/pages/host/Table.js

@@ -38,11 +38,11 @@ class ComTable extends React.Component {
     width: 200,
     render: info => (
       <span>
-        <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
+        <LinkButton auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
         <Divider type="vertical"/>
-        <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
+        <LinkButton auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
         <Divider type="vertical"/>
-        <LinkButton onClick={() => this.handleConsole(info)}>Console</LinkButton>
+        <LinkButton auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</LinkButton>
       </span>
     )
   }];

spug_web/src/pages/host/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Card, Input, Button, Select } from 'antd';
-import { SearchForm } from 'components';
+import { SearchForm, AuthDiv } from 'components';
 import ComTable from './Table';
 import store from './store';
 
@@ -23,9 +23,9 @@ export default observer(function () {
           <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
         </SearchForm.Item>
       </SearchForm>
-      <div style={{marginBottom: 16}}>
+      <AuthDiv auth="host.host.add" style={{marginBottom: 16}}>
         <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
-      </div>
+      </AuthDiv>
       <ComTable/>
     </Card>
   )

spug_web/src/pages/login/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {Form, Input, Icon, Button, Tabs, Modal} from 'antd';
 import styles from './login.module.css';
 import history from 'libs/history';
-import {http} from 'libs';
+import {http, updatePermissions} from 'libs';
 import logo from 'layout/logo.svg';
 
 class LoginIndex extends React.Component {
@@ -42,6 +42,8 @@ class LoginIndex extends React.Component {
     localStorage.setItem('token', data['access_token']);
     localStorage.setItem('nickname', data['nickname']);
     localStorage.setItem('is_supper', data['is_supper']);
+    localStorage.setItem('permissions', JSON.stringify(data['permissions']));
+    updatePermissions(data['is_supper'], data['permissions']);
     if (history.location.state && history.location.state['from']) {
       history.push(history.location.state['from'])
     } else {

spug_web/src/pages/system/account/Form.js

@@ -4,7 +4,6 @@ import http from 'libs/http';
 import store from './store';
 import roleStore from '../role/store';
 import {Link} from "react-router-dom";
-import {LinkButton} from 'components';
 
 class ComForm extends React.Component {
   constructor(props) {

spug_web/src/pages/system/role/PagePerm.js

@@ -66,8 +66,14 @@ class PagePerm extends React.Component {
         onCancel={() => store.pagePermVisible = false}
         confirmLoading={this.state.loading}
         onOk={this.handleSubmit}>
-        <Alert closable style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}} type="info"
-                 message="小提示: 功能权限仅影响页面功能，管理发布应用权限请在发布权限中设置。"/>
+        <Alert
+          closable
+          showIcon
+          type="info"
+          style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
+          message="小提示"
+          description={[<div key="1">功能权限仅影响页面功能，管理发布应用权限请在发布权限中设置。</div>,
+            <div key="2">权限更改成功后会强制属于该角色的账户重新登录。</div>]}/>
         <table border="1" className={styles.table}>
           <thead>
           <tr>