权限配置.

ui/src/App.vue

@@ -19,7 +19,23 @@
       ><router-link to="/user-page" class="pad-l-r">用户</router-link>
       <span>|</span
       ><router-link to="/op-page" class="pad-l-r">运维</router-link>
-      <span class="right">集群：{{ clusterName }}</span>
+      <div class="right">
+        <span>集群：{{ clusterName }} </span>
+        <a-dropdown v-show="showUsername">
+          <span>
+            <span> | </span><a-icon type="smile"></a-icon>
+            <span>{{ username }}</span>
+          </span>
+          <a-menu slot="overlay">
+            <a-menu-item key="1">
+              <a href="javascript:;" @click="logout">
+                <!--              <a-icon type="logout"/>-->
+                <span>退出</span>
+              </a>
+            </a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      </div>
     </div>
     <router-view class="content" />
   </div>
@@ -28,9 +44,9 @@
 import { KafkaClusterApi, AuthApi } from "@/utils/api";
 import request from "@/utils/request";
 import { mapMutations, mapState } from "vuex";
-import { getClusterInfo } from "@/utils/local-cache";
+import {deleteToken, deleteUsername, getClusterInfo, getUsername} from "@/utils/local-cache";
 import notification from "ant-design-vue/lib/notification";
-import {AUTH, CLUSTER} from "@/store/mutation-types";
+import { AUTH, CLUSTER } from "@/store/mutation-types";
 
 export default {
   data() {
@@ -46,13 +62,19 @@ export default {
     ...mapState({
       clusterName: (state) => state.clusterInfo.clusterName,
       enableSasl: (state) => state.clusterInfo.enableSasl,
+      showUsername: (state) => state.auth.enable && state.auth.username,
+      username: (state) => state.auth.username,
     }),
   },
   methods: {
     ...mapMutations({
       switchCluster: CLUSTER.SWITCH,
       enableAuth: AUTH.ENABLE,
+      setUsername: AUTH.SET_USERNAME,
     }),
+    beforeLoadFn() {
+      this.setUsername(getUsername());
+    },
     intAuthState() {
       request({
         url: AuthApi.enable.url,
@@ -85,6 +107,14 @@ export default {
         this.switchCluster(clusterInfo);
       }
     },
+    logout() {
+      deleteToken();
+      deleteUsername();
+      this.$router.push("/login-page");
+    },
+  },
+  mounted() {
+    this.beforeLoadFn();
   },
 };
 </script>

ui/src/directives/action.js

@@ -0,0 +1,13 @@
+import Vue from "vue";
+
+const action = Vue.directive("action", {
+  inserted: function (el, binding) {
+    const actionName = binding.arg;
+    if (actionName != "action") {
+      (el.parentNode && el.parentNode.removeChild(el)) ||
+        (el.style.display = "none");
+    }
+  },
+});
+
+export default action;

ui/src/main.js

@@ -6,6 +6,7 @@ import store from "./store";
 import Antd from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
 import { VueAxios } from "./utils/request";
+import "@/directives/action";
 
 Vue.config.productionTip = false;
 Vue.use(Antd);

ui/src/store/index.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import { CLUSTER, AUTH } from "@/store/mutation-types";
-import { setClusterInfo } from "@/utils/local-cache";
+import { setClusterInfo, setToken, setUsername } from "@/utils/local-cache";
 
 Vue.use(Vuex);
 
@@ -14,6 +14,7 @@ export default new Vuex.Store({
     },
     auth: {
       enable: false,
+      username: "",
     },
   },
   mutations: {
@@ -34,8 +35,12 @@ export default new Vuex.Store({
     [AUTH.ENABLE](state, enable) {
       state.auth.enable = enable;
     },
-    [AUTH.SET](state, info) {
-      localStorage.setItem("access_token", info);
+    [AUTH.SET_TOKEN](state, info) {
+      setToken(info);
+    },
+    [AUTH.SET_USERNAME](state, username) {
+      setUsername(username);
+      state.auth.username = username;
     },
   },
   actions: {},

ui/src/store/mutation-types.js

@@ -4,5 +4,6 @@ export const CLUSTER = {
 
 export const AUTH = {
   ENABLE: "enable",
-  SET: "setToken",
+  SET_TOKEN: "setToken",
+  SET_USERNAME: "setUsername",
 };

ui/src/utils/constants.js

@@ -4,4 +4,8 @@ export const ConstantEvent = {
 
 export const Cache = {
   clusterInfo: "clusterInfo",
+  auth: "auth",
+  token: "access_token",
+  username: "login_user",
+  enableAuth: "enable_auth",
 };

ui/src/utils/local-cache.js

@@ -8,3 +8,35 @@ export function getClusterInfo() {
   const str = localStorage.getItem(Cache.clusterInfo);
   return str ? JSON.parse(str) : undefined;
 }
+
+// export function setAuth(auth) {
+//   localStorage.setItem(Cache.auth, JSON.stringify(auth));
+// }
+
+export function setToken(token) {
+  localStorage.setItem(Cache.token, token);
+}
+
+export function getToken() {
+  return localStorage.getItem(Cache.token);
+}
+
+export function deleteToken() {
+  localStorage.removeItem(Cache.token);
+}
+
+export function deleteUsername() {
+  localStorage.removeItem(Cache.username);
+}
+
+export function setUsername(username) {
+  localStorage.setItem(Cache.username, username);
+}
+
+export function getUsername() {
+  return localStorage.getItem(Cache.username);
+}
+
+// export function setEnableAuth(enable) {
+//   localStorage.setItem()
+// }

ui/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <a-card title="控制台默认配置" class="card-style">
+    <a-card v-action:action title="控制台默认配置" class="card-style">
       <p v-for="(v, k) in config" :key="k">{{ k }}={{ v }}</p>
     </a-card>
     <p></p>

ui/src/views/login/Login.vue

@@ -65,6 +65,7 @@ export default {
             this.loading = false;
             if (res.code == 0) {
               this.setToken(res.data.token);
+              this.setUsername(params.username);
               this.$router.push("/");
             } else {
               notification.error({
@@ -77,7 +78,8 @@ export default {
       });
     },
     ...mapMutations({
-      setToken: AUTH.SET,
+      setToken: AUTH.SET_TOKEN,
+      setUsername: AUTH.SET_USERNAME,
     }),
   },
 };

ui/src/views/topic/Topic.vue

@@ -46,7 +46,7 @@
           </a-form>
         </div>
         <div class="operation-row-button">
-          <a-button type="primary" @click="openCreateTopicDialog"
+          <a-button type="primary" @click="openCreateTopicDialog" v-action:action
             >新增</a-button
           >
           <a-popconfirm
@@ -60,6 +60,7 @@
               class="btn-left"
               :disabled="!hasSelected"
               :loading="loading"
+              v-action:action
             >
               批量删除
             </a-button>

ui/src/views/user/Role.vue

@@ -204,6 +204,18 @@ export default {
                 .filter((id) => idSet.has(id));
               btn.selected = selected || [];
               btn.selectAll = btn.selected.length == btn.children.length;
+            } else {
+              const self = Object.assign({}, btn);
+              self.name = btn.name;
+              self.label = btn.name;
+              self.value = btn.id;
+              const btnArr = [self];
+              btn.children = btnArr;
+              const selected = btn.children
+                  .map((bc) => bc.id)
+                  .filter((id) => idSet.has(id));
+              btn.selected = selected || [];
+              btn.selectAll = btn.selected.length == btn.children.length;
             }
           });
           menu.children = arr;