feat: add authentication control

src/components/Roles/RoleList.vue

@@ -141,31 +141,33 @@ import {
   getUpdate_role as reqGetUpdate_role,
   get_role_info as reqGet_role_info,
   getDelete_role as reqGetDelete_role,
-  getAdd_role as reqGetAdd_role
+  getAdd_role as reqGetAdd_role,
 } from "../../service/role";
 export default {
   name: "RoleList",
-  props: ["appId", "detailPath"],
+  props: ["appId", "detailPath", "rolePermissionId"],
   components: {
-    page
+    page,
   },
   computed: {
     permission() {
+      let rolePermissionId = this.role || "role";
+      let appId = this.appId || "";
       const modulePermissions =
-        this.$store.getters.moduleSubPermissions("role") || [];
-      return new Map(modulePermissions.map(ele => [ele.name, true]));
-    }
+        this.$store.getters.moduleSubPermissions(rolePermissionId, appId) || [];
+      return new Map(modulePermissions.map((ele) => [ele.name, true]));
+    },
   },
   data() {
     return {
       searchForm: {
         roleName: "",
-        roleStatus: ""
+        roleStatus: "",
       },
       formLabelWidth: "120px",
       params: {
         page: 1,
-        page_size: 20
+        page_size: 20,
       },
       totalNum: null,
       roleTitle: "",
@@ -175,7 +177,7 @@ export default {
         multiple: true, //设置为多选
         value: "id", //value值和哪个值绑定
         label: "desc", //label值和哪个值绑定
-        children: "sub_permissions" //children值和哪个值绑定
+        children: "sub_permissions", //children值和哪个值绑定
       },
       selectedOptions: [],
       dialogVisible: false,
@@ -184,11 +186,11 @@ export default {
       role_info_detail: {
         //详情非编辑项
         role_id: "",
-        role_name: ""
+        role_name: "",
       },
       permissionsAll: [],
       currenPermissionsUpdate: [],
-      currentRolePrivilege: []
+      currentRolePrivilege: [],
     };
   },
   beforeMount() {
@@ -212,12 +214,12 @@ export default {
     toRoleDetail(row) {
       this.$router.push({
         path: this.detailPath,
-        query: { roleId: row.role_id }
+        query: { roleId: row.role_id },
       });
     },
     getPermissionsAll() {
       let { email } = this.$store.state.userInfo;
-      reqGetAll_role_list(email, this.appId).then(res => {
+      reqGetAll_role_list(email, this.appId).then((res) => {
         this.permissionsAll = res.permissions;
       });
     },
@@ -228,9 +230,9 @@ export default {
         page,
         page_size,
         role_status: this.searchForm.roleStatus,
-        role_name: this.searchForm.roleName
+        role_name: this.searchForm.roleName,
       };
-      reqGetRole_list(paramsRole_list, this.appId).then(res => {
+      reqGetRole_list(paramsRole_list, this.appId).then((res) => {
         this.managementList = res.result;
         this.totalNum = res.count;
       });
@@ -255,7 +257,7 @@ export default {
       this.$confirm(`${this.dialogText}是否继续?`, "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
         .then(() => {
           if (type === "disable") {
@@ -267,23 +269,23 @@ export default {
         .catch(() => {
           this.$message({
             type: "info",
-            message: "已取消"
+            message: "已取消",
           });
         });
     },
     //删除
     delete(role_id) {
-      reqGetDelete_role(role_id, this.appId).then(res => {
+      reqGetDelete_role(role_id, this.appId).then((res) => {
         if (res.status == "success") this.getGetRole_list();
       });
     },
     //角色详情数据
     getRole_info_detail(type, role_id) {
-      reqGet_role_info(role_id, this.appId).then(res => {
+      reqGet_role_info(role_id, this.appId).then((res) => {
         const { role_id, role_name, permissions } = res.result;
         this.role_info_detail = {
           role_id,
-          role_name
+          role_name,
         };
         this.roleName = role_name;
         // this.permissionsUpdate = permissions
@@ -306,10 +308,10 @@ export default {
     //遍历回显值selectedOptions
     editEchoData(permissions) {
       let selectData = [];
-      permissions.map(item => {
+      permissions.map((item) => {
         let one = { id: item.id };
         if (item.sub_permissions) {
-          item.sub_permissions.map(info => {
+          item.sub_permissions.map((info) => {
             let selectId = [one.id, info.id];
             selectData.push(selectId);
           });
@@ -322,7 +324,7 @@ export default {
       if (row.role_status == 1) {
         this.$message({
           type: "info",
-          message: "该条数据已启用"
+          message: "该条数据已启用",
         });
         return false;
       }
@@ -333,7 +335,7 @@ export default {
       if (row.role_status == 2) {
         this.$message({
           type: "info",
-          message: "该条数据已禁用"
+          message: "该条数据已禁用",
         });
         return false;
       }
@@ -346,9 +348,9 @@ export default {
         role_name: role_name,
         role_id,
         role_status,
-        permissions
+        permissions,
       };
-      reqGetUpdate_role(paramsUpdate_role, this.appId).then(res => {
+      reqGetUpdate_role(paramsUpdate_role, this.appId).then((res) => {
         if (res.status === "success") {
           this.dialogVisible = false;
           this.getGetRole_list();
@@ -356,7 +358,7 @@ export default {
           this.dialogVisible = false;
           this.$message({
             type: "info",
-            message: `${res.reason}`
+            message: `${res.reason}`,
           });
         }
       });
@@ -383,7 +385,7 @@ export default {
       if (!(this.roleName && checkRolePrivilege.length > 0)) {
         this.$message({
           type: "error",
-          message: "请完善信息"
+          message: "请完善信息",
         });
         return false;
       }
@@ -408,16 +410,16 @@ export default {
     getAdd_role() {
       let paramsAdd_role = {
         role_name: this.roleName,
-        permissions: this.currenPermissionsUpdate
+        permissions: this.currenPermissionsUpdate,
       };
-      reqGetAdd_role(paramsAdd_role, this.appId).then(res => {
+      reqGetAdd_role(paramsAdd_role, this.appId).then((res) => {
         this.dialogVisible = false;
         if (res.status === "success") {
           this.getGetRole_list();
         } else {
           this.$message({
             type: "info",
-            message: `${res.reason}`
+            message: `${res.reason}`,
           });
         }
       });
@@ -427,13 +429,13 @@ export default {
     },
     getSelectedOptions(selectedOptions) {
       let oldDataRule = [];
-      selectedOptions.forEach(el => {
+      selectedOptions.forEach((el) => {
         let oldObj = {
           id: el[0],
-          sub_permissions: []
+          sub_permissions: [],
         };
         let btnObj = {
-          id: el[1]
+          id: el[1],
         };
         oldObj.sub_permissions.push(btnObj);
         oldDataRule.push(oldObj);
@@ -445,11 +447,11 @@ export default {
           newData.push(el);
           newObj[el.id] = true;
         } else {
-          newData.forEach(el => {
+          newData.forEach((el) => {
             if (el.id === oldDataRule[i].id) {
               el.sub_permissions = [
                 ...el.sub_permissions,
-                ...oldDataRule[i].sub_permissions
+                ...oldDataRule[i].sub_permissions,
               ];
             }
           });
@@ -457,8 +459,8 @@ export default {
       });
       this.currentRolePrivilege = newData;
       this.currenPermissionsUpdate = newData;
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>

src/components/UserList/index.vue

@@ -119,7 +119,7 @@ import {
 
 export default {
   name: "UserList",
-  props: ["appId"],
+  props: ["appId", "userPermissionId"],
   components: {
     page,
     UserInfoModal,
@@ -150,8 +150,10 @@ export default {
   },
   computed: {
     permission() {
+      const appId = this.appId || "";
+      const userPermissionId = this.userPermissionId || "user";
       const modulePermissions =
-        this.$store.getters.moduleSubPermissions("user") || [];
+        this.$store.getters.moduleSubPermissions(userPermissionId, appId) || [];
       console.log("Current page func-permissions:", modulePermissions);
       return new Map(modulePermissions.map(ele => [ele.name, true]));
     },

src/pages/Withdrawal/Role/manage-role.vue

@@ -3,6 +3,7 @@
     <role-list
       appId="merchant-op-auditing"
       detailPath="/op/withdrawal/roleRoleDetail"
+      rolePermissionId="role_management"
     ></role-list>
   </layout>
 </template>

src/pages/Withdrawal/components/PageHeader/config.js

@@ -4,14 +4,17 @@ const headerConfig = [
     path: "/op/withdrawal/examine"
   },
   {
-    path: '/op/withdrawal/roleManageRole',
-    name: '角色管理'
+    path: "/op/withdrawal/roleManageRole",
+    name: "角色管理",
+    requireAuthentication: true,
+    requiredPermission: "role_management"
   },
   {
-    path: '/op/withdrawal/user',
-    name: '用户管理'
+    path: "/op/withdrawal/user",
+    name: "用户管理",
+    requireAuthentication: true,
+    requiredPermission: "user_management"
   }
-
 ];
 
 export default headerConfig;

src/pages/Withdrawal/components/PageHeader/index.vue

@@ -15,13 +15,15 @@
         v-for="item in headerConfig"
         :index="item.path"
         :key="item.path"
+        v-show="
+          !item.requireAuthentication ||
+            (item.requireAuthentication &&
+              hasPermission(item.requiredPermission))
+        "
       >
         {{ item.name }}
       </el-menu-item>
-      <el-menu-item
-        key="usermenu"
-        class="user-menu"
-      >
+      <el-menu-item key="usermenu" class="user-menu">
         <user></user>
       </el-menu-item>
     </el-menu>
@@ -35,22 +37,30 @@ import User from "./User.vue";
 export default {
   name: "PageHeader",
   components: {
-    User
+    User,
   },
-  data () {
+  data() {
     return {
-      headerConfig
+      headerConfig,
     };
   },
   computed: {
-    activeMenu () {
+    activeMenu() {
       return this.$route.path;
-    }
     },
-  beforeMount () { },
-  methods: {}
+  },
+  beforeMount() {},
+  methods: {
+    hasPermission(permissionId) {
+      return (
+        this.$store.getters.moduleSubPermissions(
+          permissionId,
+          "merchant-op-auditing"
+        ).length !== 0
+      );
+    },
+  },
 };
 </script>
 
-<style lang="less">
-</style>
+<style lang="less"></style>

src/store/index.js

@@ -32,7 +32,16 @@ export default createStore({
     async fetchPermission({ commit }, { email, appId }) {
       if (appId === "merchant-op-auditing") {
         const permissions = await getRolesForUser(email);
-        commit("updatePermissionForApp", { appId, permissions });
+        if (!permissions) {
+          return;
+        }
+
+        const permissionMap = permissions.reduce((prev, permission) => {
+          prev[permission.name] = permission;
+          return prev;
+        });
+
+        commit("updatePermissionForApp", { appId, permissionMap });
         return;
       }
       console.error("无 appId 注册", appId);
@@ -56,7 +65,13 @@ export default createStore({
      */
     moduleSubPermissions: state => (module, appId = "") => {
       if (appId !== "") {
-        return;
+        if (!state.permissionsForApp[appId]) {
+          return [];
+        }
+        if (!state.permissionsForApp[appId][module]) {
+          return [];
+        }
+        return state.permissionsForApp[appId][module].sub_permissions;
       }
 
       const permissionCol = {};