对接菜单权限

.env

@@ -6,4 +6,7 @@ VITE_PORT = 3050
 
 VITE_SERVER = "/pilot/admin"
 
-VITE_PLATFORM = "tuoheng-pilot-admin"
+VITE_PLATFORM = "tuoheng-pilot-admin"
+
+VITE_CLIENT_ID = 'tuoheng-pilot-admin'
+VITE_CLIENT_SECRET = 'WB0CZ1c6bZLiYP6jLtDFsA=='

.env.localhost

@@ -13,6 +13,4 @@ VITE_APP_GLOB_BASE_API = '/api-local'
 # mock base api
 VITE_APP_GLOB_BASE_API_MOCK = '/api-mock'
 
-VITE_AUTHORITY = 'https://login-test.t-aaron.com'
-VITE_CLIENT_ID = 'tuoheng-pilot-admin'
-VITE_CLIENT_SECRET = 'WB0CZ1c6bZLiYP6jLtDFsA=='
+VITE_AUTHORITY = 'http://192.168.11.11:8090'

src/api/auth/index.js

@@ -21,3 +21,16 @@ export function getMenu() {
     method: 'GET'
   })
 }
+
+/**
+ * @description: 获取menu和permission
+ * @param {String} roleId 角色Id
+ * @return {*}
+ */
+export const fetchPermission = (params) => {
+  return request({
+    url: `/permission/getRolePermission`,
+    method: 'GET',
+    params
+  })
+}

src/router/guard/permission-guard.js

@@ -14,11 +14,13 @@ export function createPermissionGuard(router) {
         next()
       } else {
         try {
-          // const { role } = oidcUser.profile
-          // const roles = role.includes('admin') ? 'admin' : 'flyer'
-          const userRole = await userStore.getUserInfos() || 1
-          const roleList = { 1: 'admin', 2: 'flyer' }
-          const routes = await permissionStore.generateRoutesMock([roleList[userRole]])
+          const { VITE_CLIENT_ID } = import.meta.env
+          const { clientRoleList } = oidcUser.profile
+          const { roleId } = clientRoleList.find((item) => {
+            return item.clientId === VITE_CLIENT_ID
+          })
+          const routes = await permissionStore.generateRoutes(roleId)
+          console.log(routes, '==================')
           routes.forEach((item) => {
             router.addRoute(item)
           })

src/store/modules/permission.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { asyncRoutes, basicRoutes } from '@/router/routes'
-import { getMenu } from '@/api/auth/index'
+import { fetchPermission } from '@/api/auth/index'
 import Layout from '@/layout/index.vue'
 import modules from '@/utils/module.js'
 
@@ -89,6 +89,38 @@ function dataArrayToRoutes(routes) {
   return res
 }
 
+function dealRoutes(routes) {
+  const res = []
+  routes.forEach(item => {
+    const tmp = { ...item }
+    if (tmp.parentId === 0) {
+      tmp.component = Layout
+      if (tmp.children) {
+        tmp.redirect = tmp.path === '/' ? `/${tmp.children[0].path}` : `${tmp.path}/${tmp.children[0].path}`
+        tmp.children = dealRoutes(tmp.children)
+      }
+    } else {
+      const sub_view = tmp.component.replace(/^\/*/g, '')
+      const component = `../${sub_view}.vue`
+      tmp.component = modules[component]
+    }
+    tmp.title = tmp.name
+    tmp.meta = {
+      ...tmp?.meta,
+      title: tmp.name
+    }
+    res.push(tmp)
+  })
+  return res
+}
+
+function dealPermissions(permissionsList) {
+  const res = permissionsList.map((tmp) => {
+    return tmp.code
+  })
+  return res
+}
+
 export const usePermissionStore = defineStore('permission', {
   state() {
     return {
@@ -109,13 +141,17 @@ export const usePermissionStore = defineStore('permission', {
       this.accessRoutes = accessRoutes
       return accessRoutes
     },
-    async generateRoutes() {
+    async generateRoutes(roleId) {
       try {
-        const res = await getMenu()
+        const res = await fetchPermission({ roleId, clientId: 'tuoheng-pilot-admin' })
         if (res.code === 0) {
-          const result = dataArrayToRoutes(res.data)
-          this.accessRoutes = result
-          return Promise.resolve(result)
+          const { opMenusList, permissionsList } = res.data
+          const menus = dealRoutes(opMenusList)
+          const permissionCodes = dealPermissions(permissionsList)
+          this.accessRoutes = menus
+          this.accessPermissions = permissionsList
+          this.accessPermissionCodes = permissionCodes
+          return Promise.resolve(menus)
         } else {
           return Promise.reject(res.message)
         }

src/views/system-manage/department-manage/tools/table.js

@@ -45,10 +45,19 @@ const data = reactive({
   handleSearch,
 
   columns: [
+    {
+      title: '序号',
+      key: 'key',
+      render: (_, index) => {
+        return `${index + 1}`
+      },
+      align: 'center'
+    },
     {
       title: '部门编号',
       key: 'code',
-      align: 'center'
+      align: 'center',
+      width: 200
     },
     {
       title: '部门名称',

src/views/system-manage/menu-manage/components/MenuModal.vue

@@ -108,6 +108,7 @@ export default defineComponent({
     })
 
     const getFormOptions = computed(() => {
+      console.log('change')
       return {
         ...form.formItem
       }

src/views/system-manage/menu-manage/tools/form.js

@@ -33,7 +33,7 @@ export const form = reactive({
     { type: 'input', key: 'permission', label: '权限标识', props: { maxlength: '20', placeholder: '请输入部门名称', disabled: menuType0, clearable: true }},
     { type: 'input', key: 'path', label: '路由地址', props: { maxlength: '20', placeholder: '请输入部门名称', disabled: menuType1, clearable: true }},
     { type: 'number', key: 'sort', label: '排序号', props: { min: 0, placeholder: '请输入排序号', clearable: true }},
-    { type: 'input', key: 'component', label: '组件路径', props: { maxlength: '20', placeholder: '请输入部门名称', disabled: menuType1, clearable: true }},
+    { type: 'input', key: 'component', label: '组件路径', props: { maxlength: '200', placeholder: '请输入部门名称', disabled: menuType1, clearable: true }},
     { type: 'radio', key: 'hide', label: '是否可见', options: MENU_VISIBLE },
     { type: 'radio', key: 'status', label: '菜单状态', options: MENU_STATUS }
   ]