新增权限控制

src/api/base.js

@@ -27,3 +27,10 @@ export function uploadFile(data) {
     headers: { 'Content-Type': 'multipart/form-data' }
   })
 }
+
+/**
+ * 获取权限列表
+ */
+export function getPermissions(params) {
+  return httpRequest.get('/api/permissions/api/v1/user/permissions', { params })
+}

src/components/layout/Aside.vue

@@ -5,11 +5,16 @@
         <template v-for="item in menuList">
           <el-submenu :index="item.path" :key="item.path" v-if="item.children">
             <template #title><i :class="item.icon"></i>{{ item.name }}</template>
-            <el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.path">
+            <el-menu-item
+              :index="subitem.path"
+              v-for="subitem in item.children"
+              :key="subitem.path"
+              v-show="menuVisible(subitem.tag)"
+            >
               {{ subitem.name }}
             </el-menu-item>
           </el-submenu>
-          <el-menu-item :index="item.path" :key="item.path" v-else>
+          <el-menu-item :index="item.path" :key="item.path" v-else v-show="menuVisible(item.tag)">
             <i :class="item.icon"></i>{{ item.name }}
           </el-menu-item>
         </template>
@@ -25,16 +30,19 @@ export default {
     return {
       menuList: [
         {
+          tag: 'menu_org',
           name: '机构管理',
           path: '/school',
           icon: 'el-icon-school'
         },
         {
+          tag: 'menu_role',
           name: '角色管理',
           path: '/roles',
           icon: 'el-icon-star-off'
         },
         {
+          tag: 'menu_permission',
           name: '权限管理',
           path: '/permissions',
           icon: 'el-icon-coordinate'
@@ -56,6 +64,18 @@ export default {
         return this.$route.path.includes(item.path)
       })
       return found ? found.path : '/school/class'
+    },
+    // 菜单权限
+    menuPermissions() {
+      return this.$store.state.permissions.filter(item => item.type === 2)
+    }
+  },
+  methods: {
+    menuVisible(tag) {
+      if (!tag) {
+        return true
+      }
+      return !!this.menuPermissions.find(item => item.tag === tag)
     }
   }
 }

src/modules/roles/components/Permissions.vue

@@ -11,13 +11,7 @@
       <el-form-item label="权限设置" prop="name">
         <div v-for="(item, index) in options" :key="index" v-show="form.system_tag.includes(item.system_tag)">
           {{ item.name }}
-          <el-cascader-panel
-            :options="item.permissions"
-            :props="defaultProps"
-            v-model="item.value"
-            ref="tree"
-            @change="handleChange"
-          ></el-cascader-panel>
+          <el-cascader-panel :options="item.permissions" :props="defaultProps" v-model="item.value"></el-cascader-panel>
         </div>
       </el-form-item>
     </el-form>
@@ -50,7 +44,8 @@ export default {
         { name: '学校管理系统', system_tag: 1, permissions: [], value: [] },
         { name: '教师端', system_tag: 2, permissions: [], value: [] },
         { name: '学生端', system_tag: 3, permissions: [], value: [] }
-      ]
+      ],
+      idsPath: []
     }
   },
   async beforeMount() {
@@ -68,8 +63,8 @@ export default {
     getPermissions() {
       return getPermissionList({ is_format: 1 }).then(res => {
         // 移除空数组
-        const permissions = JSON.parse(JSON.stringify(res.data).replaceAll(',"children":[]', ''))
-        this.options = permissions.reduce((result, item) => {
+        this.permissions = JSON.parse(JSON.stringify(res.data).replaceAll(',"children":[]', ''))
+        this.options = this.permissions.reduce((result, item) => {
           const index = result.findIndex(i => i.system_tag === item.system_tag)
           if (index !== -1) {
             result[index].permissions.push(item)
@@ -102,30 +97,55 @@ export default {
     },
     // 确定
     onPrimary() {
-      this.$refs.form.validate().then(() => {
-        const params = {
-          role_id: this.data.id,
-          data: this.options.reduce((result, item) => {
-            if (this.form.system_tag.includes(item.system_tag)) {
-              result.push({ system_tag: item.system_tag, permission_ids: item.value })
-            }
-            return result
-          }, [])
+      this.$refs.form.validate().then(this.updateRolePermissions)
+    },
+    updateRolePermissions() {
+      const params = {
+        role_id: this.data.id,
+        data: this.options.reduce((result, item) => {
+          if (this.form.system_tag.includes(item.system_tag)) {
+            // item.value 所有选中的权限，最后节点的ID
+            let ids = []
+            item.value.forEach(id => {
+              // 通过子节点ID，返回包含父节点ID的数组
+              this.getIdPath(this.permissions, id)
+              ids = ids.concat(this.idsPath)
+              this.idsPath = []
+            })
+            result.push({ system_tag: item.system_tag, permission_ids: this.uniqueIds(ids) })
+          }
+          return result
+        }, [])
+      }
+      this.submitLoading = true
+      updateRolePermissions(params)
+        .then(res => {
+          this.$message.success('配置成功')
+          this.$emit('update:visible', false)
+          this.$emit('success', res.data)
+        })
+        .finally(() => {
+          this.submitLoading = false
+        })
+    },
+    // 通过子节点ID，返回路径数组
+    getIdPath(tree, targetId) {
+      for (let index = 0; index < tree.length; index++) {
+        if (tree[index].children) {
+          if (this.getIdPath(tree[index].children, targetId)) {
+            this.idsPath.push(tree[index].id)
+            return true
+          }
         }
-        this.submitLoading = true
-        updateRolePermissions(params)
-          .then(res => {
-            this.$message.success('配置成功')
-            this.$emit('update:visible', false)
-            this.$emit('success', res.data)
-          })
-          .finally(() => {
-            this.submitLoading = false
-          })
-      })
+        if (tree[index].id === targetId) {
+          this.idsPath.push(tree[index].id)
+          return true
+        }
+      }
     },
-    handleChange(e) {
-      console.log(e)
+    // ID去重
+    uniqueIds(ids) {
+      return Array.from(new Set(ids))
     }
   }
 }

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
-import { getUser, logout } from '@/api/base'
+import { getUser, logout, getPermissions } from '@/api/base'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: {
-    user: {}
+    user: {},
+    permissions: [] // 权限列表
   },
   mutations: {
     setUser(state, user) {
       state.user = user
+    },
+    setPermissions(state, permissions) {
+      state.permissions = permissions
     }
   },
   actions: {
+    getPermissions({ commit }) {
+      getPermissions({ type: 2 }).then(res => {
+        if (res.data && res.data.items) {
+          commit('setPermissions', res.data.items)
+        }
+      })
+    },
     // 获取用户信息
     getUser({ commit }) {
       getUser().then(response => {
@@ -46,3 +57,6 @@ export default new Vuex.Store({
     }
   }
 })
+store.dispatch('getPermissions')
+
+export default store

src/utils/axios.js

@@ -12,6 +12,20 @@ const httpRequest = axios.create({
 // 请求拦截
 httpRequest.interceptors.request.use(
   function (config) {
+    // 权限接口单独签名
+    // https://gitlab.ezijing.com/root/api-documents/-/blob/master/ezijing_permissions/%E7%AD%BE%E5%90%8D%E9%AA%8C%E8%AF%81.md
+    if (/^\/api\/permissions/.test(config.url)) {
+      // 默认参数
+      const defaultHeaders = {
+        timestamp: parseInt(Date.now() / 1000),
+        nonce: Math.random().toString(36).slice(-8),
+        'secret-id': 'ezijing_05eb8ba938a32c105e0c0a505444ba26',
+        'secret-key': '49272e8f17b2fa46cdadebc512984129',
+        signature: 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d'
+      }
+      config.headers = Object.assign(config.headers, defaultHeaders)
+    }
+
     if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
       config.data = queryString.stringify(config.data)
     }