feat: Add dynamic route

src/views/Authorization/Role.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Table } from '@/components/Table'
+import { getUserListApi } from '@/api/login'
+import { UserType } from '@/api/login/types'
+import { ref, h } from 'vue'
+import { ElButton } from 'element-plus'
+
+interface Params {
+  pageIndex?: number
+  pageSize?: number
+}
+
+const { t } = useI18n()
+
+const columns: TableColumn[] = [
+  {
+    field: 'index',
+    label: t('userDemo.index'),
+    type: 'index'
+  },
+  {
+    field: 'username',
+    label: t('userDemo.username')
+  },
+  {
+    field: 'password',
+    label: t('userDemo.password')
+  },
+  {
+    field: 'role',
+    label: t('userDemo.role')
+  },
+  {
+    field: 'remark',
+    label: t('userDemo.remark'),
+    formatter: (row: UserType) => {
+      return h(
+        'span',
+        row.username === 'admin' ? t('userDemo.remarkMessage1') : t('userDemo.remarkMessage2')
+      )
+    }
+  },
+  {
+    field: 'action',
+    label: t('userDemo.action')
+  }
+]
+
+const loading = ref(true)
+
+let tableDataList = ref<UserType[]>([])
+
+const getTableList = async (params?: Params) => {
+  const res = await getUserListApi({
+    params: params || {
+      pageIndex: 1,
+      pageSize: 10
+    }
+  })
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+  if (res) {
+    tableDataList.value = res.data.list
+  }
+}
+
+getTableList()
+
+const acitonFn = (data: TableSlotDefault) => {
+  console.log(data)
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('userDemo.title')" :message="t('userDemo.message')">
+    <Table :columns="columns" :data="tableDataList" :loading="loading" :selection="false">
+      <template #action="data">
+        <ElButton type="primary" @click="acitonFn(data as TableSlotDefault)">
+          {{ t('tableDemo.action') }}
+        </ElButton>
+      </template>
+    </Table>
+  </ContentWrap>
+</template>

src/views/Authorization/User.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Table } from '@/components/Table'
+import { getUserListApi } from '@/api/login'
+import { UserType } from '@/api/login/types'
+import { ref, h } from 'vue'
+import { ElButton } from 'element-plus'
+
+interface Params {
+  pageIndex?: number
+  pageSize?: number
+}
+
+const { t } = useI18n()
+
+const columns: TableColumn[] = [
+  {
+    field: 'index',
+    label: t('userDemo.index'),
+    type: 'index'
+  },
+  {
+    field: 'username',
+    label: t('userDemo.username')
+  },
+  {
+    field: 'password',
+    label: t('userDemo.password')
+  },
+  {
+    field: 'role',
+    label: t('userDemo.role')
+  },
+  {
+    field: 'remark',
+    label: t('userDemo.remark'),
+    formatter: (row: UserType) => {
+      return h(
+        'span',
+        row.username === 'admin' ? t('userDemo.remarkMessage1') : t('userDemo.remarkMessage2')
+      )
+    }
+  },
+  {
+    field: 'action',
+    label: t('userDemo.action')
+  }
+]
+
+const loading = ref(true)
+
+let tableDataList = ref<UserType[]>([])
+
+const getTableList = async (params?: Params) => {
+  const res = await getUserListApi({
+    params: params || {
+      pageIndex: 1,
+      pageSize: 10
+    }
+  })
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+  if (res) {
+    tableDataList.value = res.data.list
+  }
+}
+
+getTableList()
+
+const acitonFn = (data: TableSlotDefault) => {
+  console.log(data)
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('userDemo.title')" :message="t('userDemo.message')">
+    <Table :columns="columns" :data="tableDataList" :loading="loading" :selection="false">
+      <template #action="data">
+        <ElButton type="primary" @click="acitonFn(data as TableSlotDefault)">
+          {{ t('tableDemo.action') }}
+        </ElButton>
+      </template>
+    </Table>
+  </ContentWrap>
+</template>

src/views/Login/components/LoginForm.vue

@@ -5,7 +5,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { ElButton, ElCheckbox, ElLink } from 'element-plus'
 import { required } from '@/utils/formRules'
 import { useForm } from '@/hooks/web/useForm'
-import { loginApi } from '@/api/login'
+import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
 import type { UserLoginType } from '@/api/login/types'
 import { useCache } from '@/hooks/web/useCache'
 import { useAppStore } from '@/store/modules/app'
@@ -126,17 +126,41 @@ const signIn = async () => {
     if (res) {
       const { wsCache } = useCache()
       wsCache.set(appStore.getUserInfo, res.data)
-      await permissionStore.generateRoutes().catch(() => {})
 
-      permissionStore.getAddRouters.forEach((route) => {
-        addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
-      })
-      permissionStore.setIsAddRouters(true)
-      // push({ path: redirect.value || permissionStore.addRouters[0].path })
-      push({ path: permissionStore.addRouters[0].path })
+      getRole()
     }
   }
 }
+
+// 获取角色信息
+const getRole = async () => {
+  const { getFormData } = methods
+  const formData = await getFormData<UserLoginType>()
+  const params = {
+    roleName: formData.username
+  }
+  // admin - 模拟后端过滤菜单
+  // test - 模拟前端过滤菜单
+  const res =
+    formData.username === 'admin'
+      ? await getAdminRoleApi({ params })
+      : await getTestRoleApi({ params })
+  if (res) {
+    const { wsCache } = useCache()
+    const routers = res.data.list || []
+    wsCache.set('roleRouters', routers)
+
+    formData.username === 'admin'
+      ? await permissionStore.generateRoutes('admin', routers).catch(() => {})
+      : await permissionStore.generateRoutes('test', routers).catch(() => {})
+
+    permissionStore.getAddRouters.forEach((route) => {
+      addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
+    })
+    permissionStore.setIsAddRouters(true)
+    push({ path: redirect.value || permissionStore.addRouters[0].path })
+  }
+}
 </script>
 
 <template>