feat(frontend): optimize frontend interaction (#8)

Support auto refresh. Change authentication method. Streamline the frontend code.

frontend/src/App.vue

@@ -28,7 +28,7 @@
           </a-menu-item>
         </a-sub-menu>
         <a-sub-menu key="rules">
-          <span slot="title"><a-icon type="radar-chart"/><span>Rules</span></span>
+          <span slot="title"><rule-icon/><span>Rules</span></span>
           <a-menu-item key="/rules/http">
             <router-link to="/rules/http">HTTP Rules</router-link>
           </a-menu-item>
@@ -54,12 +54,43 @@
             :type="collapsed ? 'menu-unfold' : 'menu-fold'"
             @click="() => (collapsed = !collapsed)"
         />
+        <!--        <transition name="list1">-->
+        <div v-if="$route.path.includes('logs')" style="float: right; width:45% ;padding: 12px 0;line-height: 24px;">
+          <a-row :gutter="24" type="flex">
+            <a-col :span="21">
+              <a-form-model v-show="showSettings" ref="settings" layout="inline">
+                <a-row :gutter="24" type="flex">
+                  <a-col :span="9" :offset="2">
+                    <a-form-model-item label="Auto Refresh">
+                      <a-switch id="auto-refresh" v-model="autoRefresh"></a-switch>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="13">
+                    <a-form-model-item label="Refresh Interval">
+                      <a-input-number style="margin-right: -3rem;" id="refresh-interval"
+                                      v-model="refreshInterval"
+                                      :disabled="!autoRefresh"></a-input-number>
+                    </a-form-model-item>
+                  </a-col>
+                </a-row>
+              </a-form-model>
+            </a-col>
+            <a-col :span="3">
+              <a-icon
+                  :style="'font-size: 18px;padding: 12px 0;'+(showSettings?'color: #1b90ff;':'')"
+                  type="setting"
+                  @click="showSettings = !showSettings"
+              />
+            </a-col>
+          </a-row>
+        </div>
+        <!--        </transition>-->
       </a-layout-header>
       <a-layout-content
           :style="{ margin: '24px 16px', padding: '24px', borderRadius: '20px',background: '#fff', minHeight: 'initial' }"
       >
         <transition name="fade-transform">
-          <router-view></router-view>
+          <router-view ref='content'/>
         </transition>
       </a-layout-content>
     </a-layout>
@@ -68,15 +99,53 @@
 </template>
 <script>
 import Auth from '@/components/Auth'
+import RuleIcon from "@/components/Icon";
 
 export default {
   data() {
     return {
+      autoRefresh: localStorage.getItem("autoRefresh") === "true",
+      refreshInterval: localStorage.getItem("refreshInterval"),
       collapsed: false,
+      showSettings: false,
       openKeys: ['logs', "rules"],
     };
   },
+  methods: {
+    timing() {
+      if (this.timer !== null) {
+        clearInterval(this.timer)
+      }
+      this.timer = setInterval(() => {
+        this.$refs.content.fetch()
+      }, this.refreshInterval * 1000)
+    }
+  },
+  mounted() {
+    if (this.autoRefresh) {
+      this.timing()
+    }
+  },
+  destroyed() {
+    clearInterval(this.timer)
+  },
+  watch: {
+    autoRefresh(val) {
+      if (!val) {
+        clearInterval(this.timer)
+      } else {
+        this.timing()
+      }
+      localStorage.setItem('autoRefresh', val)
+    },
+    refreshInterval(val) {
+      clearInterval(this.timer)
+      this.timing()
+      localStorage.setItem('refreshInterval', val)
+    }
+  },
   components: {
+    RuleIcon,
     Auth
   }
 };
@@ -87,6 +156,17 @@ html, body {
   margin: 0;
 }
 
+.fade-enter.fade-enter-active,
+.fade-appear.fade-appear-active {
+  -webkit-animation-name: none;
+  animation-name: none;
+}
+
+.fade-leave.fade-leave-active {
+  -webkit-animation-name: none;
+  animation-name: none;
+}
+
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {

frontend/src/api/auth.js

@@ -1,11 +1,12 @@
 import request from './index'
 
-export function ping() {
+export function auth(token) {
     return request({
-        url: '/ping',
+        url: '/auth',
         method: 'get',
+        headers: {"Token": token},
         validateStatus: function (status) {
-            return status >= 200 && status < 300 // 默认的
+            return status >= 200 && status < 300
         }
     })
 }

frontend/src/api/index.js

@@ -5,13 +5,4 @@ const service = axios.create({
     timeout: 5000 // request timeout
 })
 
-service.interceptors.request.use(function (config) {
-    const token = localStorage.getItem("token")
-    if (token !== null) {
-        config.headers['Token'] = token
-    }
-    // 在发送请求之前做些什么
-    return config
-})
-
 export default service

frontend/src/components/Auth.vue

@@ -13,13 +13,13 @@
 </template>
 <script>
 import {store} from "@/main";
-import {ping} from "@/api/ping"
+import {auth} from "@/api/auth"
 
 export default {
   data() {
     return {
       confirmLoading: false,
-      token: localStorage.getItem("token")
+      token: ""
     };
   },
   computed: {
@@ -27,17 +27,13 @@ export default {
       return !store.authed
     },
   },
-  watch: {
-    token: function (val) {
-      localStorage.setItem("token", val)
-    }
-  },
   methods: {
     auth() {
       this.confirmLoading = true;
-      ping().then(() => {
+      auth(this.token).then(() => {
         store.authed = true;
         this.confirmLoading = false;
+        this.token = ""
       }).catch(e => {
         if (e.response.status === 403) {
           this.$notification.error({

frontend/src/components/FilterDropdown.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+      slot="filterDropdown"
+      style="padding: 8px"
+  >
+    <a-input
+        :placeholder="`Search ${column.dataIndex}`"
+        :value="selectedKeys[0]"
+        style="width: 188px; margin-bottom: 8px; display: block;"
+        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+        @pressEnter="() => {
+            filters[column.dataIndex] = selectedKeys[0];
+            fetch()
+          }"
+    />
+    <a-button
+        type="primary"
+        icon="search"
+        size="small"
+        style="width: 90px; margin-right: 8px"
+        @click="() => {
+            filters[column.dataIndex] = selectedKeys[0];
+            fetch()
+          }"
+    >
+      Search
+    </a-button>
+    <a-button size="small" style="width: 90px" @click="() =>{
+        clearFilters();
+        delete filters[column.dataIndex];
+        fetch()
+      }">
+      Reset
+    </a-button>
+  </div>
+</template>
+
+<script>
+export default {
+name: "FilterDropdown",
+  props:["setSelectedKeys","selectedKeys","clearFilters","column","filters","fetch"],
+
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/Icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <a-icon :component="RuleSvg"/>
+</template>
+<script>
+const RuleSvg = {
+  template: `
+  <svg t="1619355924145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" width="1rem" height="1rem"><path d="M922.666667 163.413333H598.826667a37.333333 37.333333 0 0 1 0-74.666666h323.84a37.333333 37.333333 0 0 1 0 74.666666zM922.666667 437.12H598.826667a37.333333 37.333333 0 0 1 0-74.666667h323.84a37.333333 37.333333 0 0 1 0 74.666667zM922.666667 661.333333H598.826667a37.333333 37.333333 0 0 1 0-74.666666h323.84a37.333333 37.333333 0 0 1 0 74.666666zM922.666667 934.826667H598.826667a37.333333 37.333333 0 0 1 0-74.666667h323.84a37.333333 37.333333 0 0 1 0 74.666667zM424.96 462.08H101.333333A37.333333 37.333333 0 0 1 64 424.746667V101.12A37.333333 37.333333 0 0 1 101.333333 64h323.626667a37.333333 37.333333 0 0 1 37.333333 37.333333v323.413334a37.546667 37.546667 0 0 1-37.333333 37.333333zM138.666667 387.413333h248.96V138.453333H138.666667zM424.96 960H101.333333A37.333333 37.333333 0 0 1 64 922.453333V598.826667a37.333333 37.333333 0 0 1 37.333333-37.333334h323.626667a37.546667 37.546667 0 0 1 37.333333 37.333334v323.626666A37.333333 37.333333 0 0 1 424.96 960zM138.666667 885.12h248.96V636.16H138.666667z" p-id="2094"></path></svg>
+`
+};
+export default {
+  name: "RuleIcon",
+  data() {
+    return {
+      RuleSvg
+    }
+  }
+};
+</script>
+<style scoped>
+.custom-icons-list >>> .anticon {
+  margin-right: 6px;
+}
+</style>

frontend/src/main.js

@@ -8,7 +8,9 @@ import '@/utils/index'
 Vue.config.productionTip = false;
 
 Vue.use(Antd);
-export const store = Vue.observable({authed: localStorage.getItem("token")})
+export const store = Vue.observable({
+    authed: true,
+})
 /* eslint-disable no-new */
 new Vue({
     router: router,

frontend/src/views/logs/Dns.vue

@@ -7,41 +7,16 @@
       @change="handleTableChange"
       :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
   >
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
+        :set-selected-keys="setSelectedKeys"
-    >
+        :selected-keys="selectedKeys"
-      <a-input
+        :clear-filters="clearFilters"
-          :placeholder="`Search ${column.dataIndex}`"
+        :column="column"
-          :value="selectedKeys[0]"
+        :filters="filters"
-          style="width: 188px; margin-bottom: 8px; display: block;"
+        :fetch="fetch"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+    />
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -63,6 +38,7 @@
 
 import {getDnsRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const columns = [
   {
@@ -125,6 +101,7 @@ export default {
   name: 'DnsLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -142,18 +119,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getDnsRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -165,10 +141,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Ftp.vue

@@ -23,41 +23,16 @@
         FINISHED
       </a-checkbox>
     </div>
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
+        :set-selected-keys="setSelectedKeys"
-    >
+        :selected-keys="selectedKeys"
-      <a-input
+        :clear-filters="clearFilters"
-          :placeholder="`Search ${column.dataIndex}`"
+        :column="column"
-          :value="selectedKeys[0]"
+        :filters="filters"
-          style="width: 188px; margin-bottom: 8px; display: block;"
+        :fetch="fetch"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+    />
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -86,6 +61,7 @@
 
 import {getFtpRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = {
   "CRASHED": "#f50",
@@ -128,17 +104,29 @@ const columns = [
     title: 'USER',
     dataIndex: 'user',
     key: 'user',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'PASSWORD',
     dataIndex: 'password',
     key: 'password',
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'PATH',
     dataIndex: 'path',
     key: 'path',
     ellipsis: true,
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'STATUS',
@@ -167,9 +155,10 @@ const columns = [
 ];
 
 export default {
-  name: 'DnsLogs',
+  name: 'FtpLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -188,18 +177,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getFtpRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -211,10 +199,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Http.vue

@@ -7,41 +7,16 @@
       @change="handleTableChange"
       :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
   >
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
+        :set-selected-keys="setSelectedKeys"
-    >
+        :selected-keys="selectedKeys"
-      <a-input
+        :clear-filters="clearFilters"
-          :placeholder="`Search ${column.dataIndex}`"
+        :column="column"
-          :value="selectedKeys[0]"
+        :filters="filters"
-          style="width: 188px; margin-bottom: 8px; display: block;"
+        :fetch="fetch"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+    />
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -75,6 +50,7 @@
 
 import {getHttpRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = {
   "GET": "#52c41a",
@@ -157,6 +133,7 @@ export default {
   name: 'HttpLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -175,18 +152,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getHttpRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -198,10 +174,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Mysql.vue

@@ -27,41 +27,16 @@
         False
       </a-checkbox>
     </div>
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
+        :set-selected-keys="setSelectedKeys"
-    >
+        :selected-keys="selectedKeys"
-      <a-input
+        :clear-filters="clearFilters"
-          :placeholder="`Search ${column.dataIndex}`"
+        :column="column"
-          :value="selectedKeys[0]"
+        :filters="filters"
-          style="width: 188px; margin-bottom: 8px; display: block;"
+        :fetch="fetch"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+    />
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -96,6 +71,7 @@
 
 import {getMysqlRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const colors = [
   "#13c2c2",
@@ -200,6 +176,7 @@ export default {
   name: 'MysqlLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -218,18 +195,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getMysqlRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -241,10 +217,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/logs/Rmi.vue

@@ -7,41 +7,16 @@
       @change="handleTableChange"
       :rowClassName="(record, index) => index % 2 === 0 ? '' : 'gray-table-row'"
   >
-    <div
+    <filter-dropdown
         slot="filterDropdown"
         slot-scope="{ setSelectedKeys, selectedKeys, clearFilters, column }"
-        style="padding: 8px"
+        :set-selected-keys="setSelectedKeys"
-    >
+        :selected-keys="selectedKeys"
-      <a-input
+        :clear-filters="clearFilters"
-          :placeholder="`Search ${column.dataIndex}`"
+        :column="column"
-          :value="selectedKeys[0]"
+        :filters="filters"
-          style="width: 188px; margin-bottom: 8px; display: block;"
+        :fetch="fetch"
-          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+    />
-          @pressEnter="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      />
-      <a-button
-          type="primary"
-          icon="search"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="() => {
-            filters[column.dataIndex] = selectedKeys[0];
-            fetch()
-          }"
-      >
-        Search
-      </a-button>
-      <a-button size="small" style="width: 90px" @click="() =>{
-        clearFilters();
-        delete filters[column.dataIndex];
-        fetch()
-      }">
-        Reset
-      </a-button>
-    </div>
     <a-icon
         slot="filterIcon"
         slot-scope="filtered"
@@ -63,6 +38,7 @@
 
 import {getRmiRecord} from '@/api/record'
 import {store} from '@/main'
+import FilterDropdown from '@/components/FilterDropdown'
 
 const columns = [
   {
@@ -101,6 +77,10 @@ const columns = [
     dataIndex: 'path',
     key: 'path',
     ellipsis: true,
+    scopedSlots: {
+      filterDropdown: 'filterDropdown',
+      filterIcon: 'filterIcon',
+    },
   },
   {
     title: 'REMOTE IP',
@@ -119,9 +99,10 @@ const columns = [
 ];
 
 export default {
-  name: 'DnsLogs',
+  name: 'RmiLogs',
   data() {
     return {
+      store,
       data: [],
       pagination: {current: 1},
       filters: {},
@@ -139,18 +120,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getRmiRecord(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -162,10 +142,18 @@ export default {
           console.error(e)
         }
       })
-    }
+    },
   },
   mounted() {
-    this.fetch({page: "1"});
+    this.fetch();
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
+  components: {
+    FilterDropdown
+  }
 }
 </script>

frontend/src/views/rules/Dns.vue

@@ -288,6 +288,7 @@ export default {
   name: 'DnsRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -311,18 +312,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getDnsRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -430,6 +430,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Ftp.vue

@@ -210,6 +210,7 @@ export default {
   name: 'FtpRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -230,18 +231,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getFtpRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -349,6 +349,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Http.vue

@@ -274,6 +274,7 @@ export default {
   name: 'HttpRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -341,18 +342,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getHttpRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -497,6 +497,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Mysql.vue

@@ -248,6 +248,7 @@ export default {
   name: 'MysqlRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -270,18 +271,17 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getMysqlRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
+
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -420,6 +420,11 @@ export default {
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/src/views/rules/Rmi.vue

@@ -185,6 +185,7 @@ export default {
   name: 'RmiRules',
   data() {
     return {
+      store,
       data: [],
       formVisible: false,
       pagination: {current: 1},
@@ -205,18 +206,16 @@ export default {
       this.fetch();
     },
     fetch: function () {
-      this.loading = true;
       let params = {
         ...this.filters,
         page: this.pagination.current,
         order: this.order
       }
+      this.loading = true;
       getRmiRule(params).then(res => {
         let result = res.data.result
         this.data = result.data
         const pagination = {...this.pagination};
-        // Read total count from server
-        // pagination.total = data.totalCount;
         pagination.total = result.count;
         this.pagination = pagination;
         this.loading = false
@@ -319,11 +318,16 @@ export default {
     handleCancel() {
       this.form = {}
       this.closeDrawer()
-    }
+    },
   },
   mounted() {
     this.fetch({page: "1"});
   },
+  watch: {
+    'store.authed'() {
+      this.fetch()
+    }
+  },
   components: {
     BasicRule,
   }

frontend/vue.config.js

@@ -17,6 +17,7 @@ module.exports = {
             }
         },
     },
+    runtimeCompiler: true,
     filenameHashing: false,
     publicPath: ''
 }

pkg/ftp/record.go

@@ -67,6 +67,12 @@ func ListRecords(c *gin.Context) {
 	if ftpRecord.Flag != "" {
 		db.Where("flag = ?", ftpRecord.Flag)
 	}
+	if ftpRecord.User != "" {
+		db.Where("user like ?", "%"+ftpRecord.User+"%")
+	}
+	if ftpRecord.Password != "" {
+		db.Where("password like ?", "%"+ftpRecord.Password+"%")
+	}
 	if ftpRecord.Path != "" {
 		db.Where("path like ?", "%"+ftpRecord.Path+"%")
 	}

pkg/server/controller.go

@@ -2,17 +2,23 @@ package server
 
 import (
 	"io"
+	"net/http"
 
 	"github.com/gin-gonic/gin"
 	"github.com/li4n0/revsuit/internal/record"
 	log "unknwon.dev/clog/v2"
 )
 
-func ping(c *gin.Context) {
+func auth(c *gin.Context) {
+	c.SetSameSite(http.SameSiteLaxMode)
 	c.SetCookie("token", c.Request.Header["Token"][0], 0, "/revsuit/api/", c.Request.Host, true, true)
 	c.String(200, "pong")
 }
 
+func ping(c *gin.Context) {
+	c.String(200, "pong")
+}
+
 func events(c *gin.Context) {
 	log.Info("Receive connection from %v", c.Request.RemoteAddr)
 	c.Stream(func(w io.Writer) bool {

pkg/server/router.go

@@ -38,6 +38,7 @@ func (revsuit *Revsuit) registerPlatformRouter() {
 	revsuit.http.ApiGroup = api
 
 	//platform routers
+	api.GET("/auth", auth)
 	api.GET("/events", events)
 	api.GET("/ping", ping)
 }